利用Css3伪元素before特性给无序列表添加排序功能

在建站过程中，我们通常在网站首页、内容页等页面需要用到文章排行榜的功能，特别是热门文章、点击率最高的文章，能增加网站文章阅读的粘性，这个时候我们就需要给每篇文章前增加上数字排序功能。

早在Css3之前，很多前端是在li元素之间添加一个内联元素，再给这个内联元素添加样式来实现数字排序功能，而现在Css3的新功能直接用伪元素before就能实现这个功能。

一、我们需要给li元素增加一个定时器的功能。

li{counter-increment:number;}

二、在伪元素before里调用计数器counter

li::before{content: counter(number);}

三、利用Css3伪元素before特性给无序列表添加排序功能实例：

<ul>

<li><a href="#">测试</a></li>

<li><a href="#">序号</a></li>

<li><a href="#">列表</a></li>

<li><a href="#">自动序号</a></li>

<li><a href="#">爽不爽</a></li>

<li><a href="#">便捷</a></li>

</ul>

CSS部分：ul,li{

list-style: none;

}

ul li a{

text-decoration: none;

}

li{

counter-increment: number;

}

li::before{

content: counter(number);

color: red;

margin-right: .5em;

}

是不是用了Css3伪元素before特性给无序列表添加排序功能，比之前方面了许多？