使用 CSS 伪元素内容与计数器（counter）来创建一些有趣的应用程序

使用内容与计数器（counter）来创建一些有趣的应用程序。我想等你熟练了之后可能就没那么好玩了。

计数器的基本使用

在CSS中，计数器是一个非常有趣的函数。最常见的是，如果我们使用列表并选择十进制作为样式。随着名单的增长，数量也会增加。最底层似乎是我们使用计数器来做到这一点，并且由于计数器生成的值并不存在于网页上的元素内部，所以如果我们想在列表元素外部使用它，我们需要使用内容: :之前或::之后。

计数器最基本的使用必须有一个父元素和一个子元素（类似于list的原理，用ul和li包裹起来），所以它会像下面这样的HTML：

<div>
    <span>钢铁人</span>
    <span>美国队长</span>
    <span>雷神索尔</span>
</div>复制代码

在CSS中，首先目标div父元素使用counter-reset:num;将计数器设置为零，其中num是计数器累加值的变量，然后你可以在span::before;中看到counter-increment:num;这一部分，这部分的作用是收集 num 上去，默认值是加1，然后通过内容来显示。

计数器的默认显示语法为：counter(counter-name,list-style-type)

div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num) '. ';
}复制代码

通过指定一开始重置计数器的起始值，以及计数器增量的累积间隔值，您可以可以创建从特定值开始或仅显示偶数和奇数的效果。

div{
  counter-reset:num 3;
}
span{
  display:block;
}
span::before{
  counter-increment:num 2; 
  content:counter(num) '. ';
}复制代码

如果要改变数字的样式，也可以通过计数器的第二个设置值，列表样式类型来改变。以下示例将样式更改为格鲁吉亚语。

div{
  counter-reset:num;
}
span{
  display:block;
}
span::before{
  counter-increment:num; 
  content:counter(num, georgian) '. ';
}复制代码

计数器的高级使用

计数器除了指定单个变量外，还可以同时指定多个变量。例如，在下面的HTML中，里面有三个类别。我用span、i和b分别对它们进行分类。

<div>
  <span>钢铁人</span>
  <span>美国队长</span>
  <span>雷神索尔</span>
  <i>宙斯盾局</i>
  <i>神鬼局</i>
  <i>神经局</i>
  <b>九头蛇</b>
  <b>九头牛</b>
  <b>九头猪</b>
</div>复制代码

CSS counter-reset 可以在开头指定多个变量，用空白字符分隔。如果空白字符后跟一个数字，则它是起始值。如果没有数字则默认为0。设置完之后可以看到不同的类别有不同的数字代码。

如果遇到嵌套结构，需要逐层展开（例如：1 > 1.1 > 1.1.1），上面的方法可能会复杂很多。幸运的是，计数器还提供了另一种计数器功能。目的是为了解决嵌套结构的问题。在开始之前，先看一下ul和li结合的列表：

<ul>
  <li>第一层
    <ul>
      <li>第二层
        <ul>
          <li>第三层</li>
          <li>第三层</li>
          <li>第三层</li>
        </ul>
      </li>
      <li>第二层</li>
      <li>第二层</li>
    </ul>
  </li>
  <li>第一层</li>
  <ul>
    <li>第二层</li>
    <li>第二层</li>
  </ul>
</ul>复制代码

如果传统列表设置为十进制，列表样式也可以具有数字连续性特征。但相对而言，不可能做出什么特别的改变。

li{
  list-style:decimal;
}复制代码

通过内容和计数器的匹配，我们可以告别默认值的问题。我们甚至可以在不使用列表 ul 和 li 的情况下达到与列表相同的效果。比如我们可以干净利落地用 div 模拟一个列表的外观（状态还是要有父元素和子元素的概念），里面的样式 b 等于 ul，样式 a 等于 li：

<div class="a">第一层
  <div class="b">
    <div class="a">第二层
      <div class="b">
        <div class="a">第三层</div>
        <div class="a">第三层</div>
        <div class="a">第三层</div>
      </div>
    </div>
    <div class="a">第二层</div>
    <div class="a">第二层</div>
  </div>
</div>
<div class="a">第一层
  <div class="b">
    <div class="a">第二层</div>
    <div class="a">第二层</div>
  </div>
</div>复制代码

由于b的外部没有任何东西构成，所以一开始对body和b都进行计数器复位，然后用计数器依次设置计数值。这样就可以达到用原始列表不容易达到的效果。

计数器的使用语法：计数器（计数器名称、分隔符、列表样式类型）

body, .b{
  counter-reset:c;
}
.a::before{
  content:counters(c, ".") "：";
  counter-increment:c; 
}
div{
  margin-left:10px;
}复制代码

了解原理后，通过::before和::after的交互应用，可以打造出与众不同的列表效果。

body, .b{
  counter-reset:c;
}
.a{
  box-sizing:border-box;
  position:relative;
  line-height:40px;
}

.a .a{
  padding-left:30px;
}

.a::after{
  content:'';
  box-sizing:border-box;
  display:inline-block;
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  width:100%;
  height:40px;
  margin-left:30px;
  box-shadow:inset 0 2px #666;
  background:#eee;
}
.a::before{
  content:counter(c, upper-roman);
  counter-increment:c;
  display:inline-block;
  width:30px;
  height:40px;
  background:#666;
  color:#fff;
  text-align:center;
  margin-right:5px;
}复制代码

作者：Jelly tfzwgd
链接：https://juejin.im/post/5cb833c3f265da038e54a361
来源：掘金属于作者所有。商业转载请联系作者获取授权。非商业转载请注明来源。