1、counter-reset 属性
用法：counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
说明：利用这个属性，计数器可以设置或重置为任何值，可以是正值或负值。如果没有提供 number，则默认为 0。
注释：如果使用 “display: none”，则无法重置计数器。如果使用 “visibility: hidden”，则可以重置计数器。
2、counter-increment 属性
用法：counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
说明：利用这个属性，计数器可以递增（或递减）某个值，这可以是正值或负值。如果没有提供 number 值，则默认为 1。
注释：如果使用了 “display: none”，则无法增加计数。如使用 “visibility: hidden”，则可增加计数。
3、content 属性
content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。
content属性值：
| 值 | 说明 |
|---|---|
| none | 设置Content，如果指定成Nothing |
| normal | 设置content，如果指定的话，正常，默认是"none"（该是nothing） |
| counter | 设定计数器内容 |
| attr(attribute) | 设置Content作为选择器的属性之一。 |
| string | 设置Content到你指定的文本 |
| open-quote | 设置Content是开口引号 |
| close-quote | 设置Content是闭合引号 |
| no-open-quote | 如果指定，移除内容的开始引号 |
| no-close-quote | 如果指定，移除内容的闭合引号 |
| url(url) | 设置某种媒体（图像，声音，视频等内容） |
| inherit | 指定的content属性的值，应该从父元素继承 |
#progressbar {counter-reset: step;}#progressbar li:before {content: counter(step);counter-increment: step;}#progressbar li:after {content: ‘‘;}#progressbar li:first-child:after {content: none; }
css设置某个选择器出现次数的计数器并输出
原文地址：https://www.cnblogs.com/ccllj/p/9174806.html