html点击一直累加,用css就可以实现累加效果的神器--counter

今天在做一个类似下面显示效果的活动页：

在前端骚操作越来越多的普遍趋势影响下，前面用箭头表示出的东西，我打算直接用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： 

一般来讲，用到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：

以上引用均来自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;

}