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