When building the ranking of the sidebar articles in the process of building a website, we will sort our website articles. In this case, an unordered list will be used, so the website will not look so beautiful without the sequence number. .
When I didn't touch CSS3, my approach was to add an inline element before the li element to add styles to this element. It felt troublesome. The Before pseudo-element in CSS3 is very convenient to implement such a function.
Need to implement pseudo-element before to add sequence number to unordered list li, you need to do the following in CSS3:
1. First, set a counter for the li tag
li{counter-increment:number;}
2. By calling the counter counter in front of the li element by the pseudo element before, it is possible to add an ordered sequence number to the li in the unordered list.
The following is the html and css code:
<!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>