ol {
padding: 0;
margin: 0;
list-style: none;
counter-reset: sectioncounter
}
ol > li{
width: 100%;
line-height: 30px;
color: #130b18;
font-size: 1.4rem;
}
ol > li:before {
content: '' counter(sectioncounter) '';
counter-increment: sectioncounter;
width: 18px;
height: 18px;
line-height: 18px;
text-align: center;
display: inline-block;
background-color: #e3c690;
color: #bc8011;
font-size: 1.4rem;
border-radius: 50%;
margin-right: 2%;
}
![效果图](https://img-blog.csdnimg.cn/20191023112047270.png)
- counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
- counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
.list{
counter-reset:section 1;
}
.list p:before{
content: counter(section) '. ';
counter-increment: section;
}
.list p{
counter-reset:subCounter;
}
.list span{
display: block;
margin-left: 3%;
}
.list span:before{
content: counter(section) '.' counter(subCounter) ' ';
counter-increment: subCounter;
background-color: #2AC845;
color: #fff;
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/20191025153142365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMwMTk2Mg==,size_16,color_FFFFFF,t_70)