2016-03-21

使用css计数器counter自动生成目录

设计师设计了如下所示的列表图：

design.png

一开始的想法是在段落里面加入一个icon类，作为列表开头的数字，实现完后发现了一个问题，一旦出现换行，下一行会出现icon类的下方，不能实现设计师的设计稿。

但是把icon放在p的外面有不符合逻辑，而且写起来很麻烦。

后来想到使用伪元素before，因为before可以在元素添加进去前放一层在其下面，利用这个功能实现提前在段落前加入一个background-image为蓝色气泡的伪元素，然后定位到左上角，再让段落p有一段padding-left，使得每一段p左边都有一个图标，这样就不用在每个p中手动添加一个icon元素

接下来就是使用css3的一个新属性counter，这是css的content新加入的一个值，能够进行简单的加减乘除计数和重置，因此能够用来自动生成目录。这样就不用手动一个个去进伪元素中了。

<pre><code>
.counter {

    counter-reset: p-counter 0;
            //每当遇到counter类就重置计数器
    }
    .counter p {

      counter-increment: 1;
              // 每当遇到p元素就自增加1
    }
    .counter p:before {
        content: counter(p-counter);
            // 将计数器的值赋给p的伪元素的content
    }

</code></pre>
这是前一周发现的css新特性，markdown了下来，结果真的用上了，所以多看看一些文章有利于提高自己解决方法的能力。