文章目录

当我们用ol标签写一组列表时,浏览器会自动给我们在每个列表前生成一个递增的数字,但往往这个数字的样式不是我们所想要的,下面介绍一种可以用css3的::before属性来自定义列表前缀及样式。
首先我们可以看下浏览器给我们生成的有序列表默认样式:

具体代码实现如下:

在css中为counter-increment属性自定义一个值,可以任意命名,同时给::before伪类中的counter赋以相同的名称,在这个伪类定义中还可以任意添加其他css样式。
当前例子中只是简单的给我们产生了列表编号,如果我们想要实现如2.这种样式的话,我们可以这样写:counter(step-counter) ".";,里面可以写你所想要的任何内容。
用这种伪类实现的方式可以减少我们模版中的DOM节点,让css来为我们实现想要的样式,同时也能保证代码的简洁性。
最后提一点,::beforecounter-increment在各个浏览器中支持都比较好,详见::beforecounter-increment

文章目录