日星网 windows 中文论坛

 找回密码
 加入我们

QQ登录

只需一步,快速开始

查看: 32|回复: 0

利用CSS 给ul ol 添加有序数字①~

[复制链接]
发表于 2020-9-30 08:17:33 | 显示全部楼层 |阅读模式
在网上找了很多资料,基本上都需要在li标签中添加 data- 或是直接在 li标签里输入相应的数字,
感觉不是很方便,找了一圈发现CSS有了一个新的方法,推荐大家也好好利用一下,能完成好多事哦


直接上代码(懒人专属)
HTML

  1. <ol>
  2.   <li>内容内容</li>
  3.   <li>内容内容</li>
  4.   <li>内容内容</li>
  5.   <li>内容内容</li>
  6.   <li>内容内容</li>
  7. </ol>
复制代码



CSS
  1. ol {
  2.   counter-reset: my-counter;
  3.   list-style: none;
  4.   padding: 0;
  5. }

  6. li {
  7.   margin-bottom: 10px;
  8.   padding-left: 30px;
  9.   position: relative;
  10. }
  11. li:before {
  12.   content: counter(my-counter);
  13.   counter-increment: my-counter;
  14.   background-color: #bada55;
  15.   color: #222;
  16.   display: block;
  17.   float: left;
  18.   line-height: 22px;
  19.   margin-left: -30px;
  20.   text-align: center;
  21.   height: 22px;
  22.   width: 22px;
  23.   border-radius: 50%;
  24. }
复制代码


*PS counter-reset 和 counter-increment可以去https://caniuse.com/css-counters
确认一下自己的浏览器是否对应哦,基本上是OK的了。

*说明
counter-reset属性创建或重置一个或多个计数器。
counter-increment属性递增一个或多个计数器值。
counter()函数必须和content属性一起使用,用来显示CSS计数器。


快去测试一下吧,相当好用,
您需要登录后才可以回帖 登录 | 加入我们

本版积分规则

手机版|小黑屋|日星网

GMT, 2020-10-26 04:40 PM , Processed in 0.016011 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表