利用伪元素before给无序列表ul中的li添加有序序号

在建站过程中做侧边栏文章排行榜的时候，我们会为我们的网站文章进行一个排序，在这种情况下就会用到无序列表，那么少了序号排列网站看上去就不是那么美观。

原来未接触CSS3的时候，我的做法是在li元素前添加一个行内元素，给这个元素添加样式，这样感觉什么麻烦，而CSS3中的Before伪元素实现这样的功能就十分便捷。

需要实现伪元素before给无序列表li添加序号，需要在CSS3中做以下操作：

一、首先要给li标签设定一个计数器

li{counter-increment:number;}

二、通过伪元素before在li元素前面调用计数器counter，就可实现给无序列表中的li添加有序序号。

以下是html及css代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>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;}</style>
</head>
<body>
<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>
</body>
</html>