前面介绍了CSS中的两个伪元素::before和::after，以及content相关的用法，本文将对content和counter（计数器）做一些有趣的讨论)应用，相信熟练之后可能会很好玩。计数器的基本用法是在CSS中。计数器是一个非常有趣的函数。最常见的是，如果我们使用列表，样式选择小数，数字会随着列表的增加而增加。底层好像是用counter做的。也因为计数器产生的值在网页的元素中是不存在的，如果我们想在列表元素之外使用它，就必须通过::before或者::after的内容来实现。counter最基本的使用必须有一个父元素和一个子元素（类似list的原理，用ul包裹li），所以外观会类似下面的html：
钢铁侠美国队长雷神
在CSS中，首先对div父元素使用counter-reset:num；将counter设置为0，num为counter变量的累加值，可以看到counter-increment:numinspan::before;这一段，这一段的作用是往上加num，默认值是加1，然后通过content显示出来。预置计数器的显示语法为：counter(计数器名称,list-style-type)div{counter-reset:num;}span{display:block;}span::before{counter-increment:num;内容：计数器（数字）'。';}通过在开始时指定计数器清零的起始值和计数器递增累加的区间值，可以从某个值开始，也可以只显示偶数和奇数。div{counter-reset:num3;}span{display:block;}span::before{counter-increment:num2;内容：计数器（数字）'。';}如果要改变数字的风格，也可以通过计数器的第二个设置值list-style-type来改变，下面的例子是改变风格为georgian。div{counter-reset:num;}span{display:block;}span::before{counter-increment:num;内容：计数器（数字，乔治亚语）'。';}counter高级用法除了指定单个变量外，counter还可以同时指定多个变量，比如下面的HTML，里面有3个类别，我用span,i,b来分类。钢铁侠美国队长雷神雷神神盾局幽灵局神经局九头蛇九头牛九头猪
css开始反重置可以指定多个变量，用分隔一个空白字符。如果空白字符后跟数字，则为初始值。如果没有数字，默认值为0。这样设置后，可以看到不同类型的数字代码。不同的。如果遇到嵌套结构，需要逐层展开（例如：1>1.1>1.1.1），使用上面的方法可能会复杂很多。好在counter还提供了计数器的另一个功能，目的是为了解决麻烦的嵌套结构，可以在开始之前通过ul和li的组合看看列表的外观：- 第一层
- 第二层
- 第三层
- 第三层
- 第三层
- 第二层
- 第二层
- 第二层
- 第一层
- 第二层
- 第二层