今天在做一个类似下面显示效果的活动页：
在前端骚操作越来越多的普遍趋势影响下，前面用箭头表示出的东西，我打算直接用before伪类去搞，这样不仅减少了标签的使用，对自己工作量的减少也是有少许作用的，然而具体实施是遇到一个头疼的问题就是伪类的content的值，因为content的值是要递增的，所以不知道counter之前，我想到的就是nth-child选择器和js控制，但是这两种，无论哪一个工作量都不小，而且，用js更有可能引发回流造成页面的性能影响。
好在，之前看张鑫旭《css世界》一书的时候，对counter略有映象，所以就把思路放到counter上了，经过十几分钟的时间成功实现了这个效果。下面结合官方解说（MDN），以及自己的理解说一下counter。
counter-reset
The counter-reset CSS property is used to reset CSS Counters to a given value.
就是说一个counter会由counter-reset重置，语法如下：
counter-reset：<custom-ident> <integer>
一般来讲，用到counter的地方肯定会是一个列表，或者类似列表的东西，所以重置一个counter应该选择在他们共同父级上，比如，我的dom长这样：
那初始化counter的地方肯定就是在ul上了！初始化之后，就要决定这个counter应该 在什么时候开始类增，所以就到counter-increment出场的时候了：
counter-increment
The counter-increment CSS property is used to increase the value of CSS Counters by a given value. The counter's value can be reset using the counter-reset CSS property.
更具体一点来说，这个属性就是用来改变前面counter-reset初始化之后的counter的，他决定了counter应该在什么时候增加，每次增加多少 ，想我前面那个dom结构肯定是遇到li的时候增加的。语法
counter-increment：<custom-ident> <integer>
以上引用均来自MDN。
所以可以写出以下的css:
ul{
counter-reset: order 0;/*counter初始化*/
}
ul li{
position: relative;
width: fit-content;
margin: 0 auto 15px;
counter-increment: order 1;/*counter变化*/
list-style:none;
}
ul li::before{
content: counter(order);/*counter的使用*/
position: absolute;
left: -40px;
top: 20px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
color: #000;
border-radius: 50%;
background:#fff;
}