サイト構築の過程でサイドバーの記事ランキングを構築する際に、ウェブサイトの記事を並べ替えます。この場合、順不同のリストが使用されるため、シーケンス番号がないとウェブサイトはそれほど美しく見えません。
CSS3に触れなかったときのアプローチは、li要素の前にインライン要素を追加してこの要素にスタイルを追加することでした。面倒でした。CSS3のBefore疑似要素は、このような関数を実装するのに非常に便利です。
順序付けされていないリストliにシーケンス番号を追加する前に、疑似要素を実装する必要があります。CSS3で次のことを行う必要があります。
1.まず、liタグのカウンターを設定します
li {counter-increment：number;}
2.以前の疑似要素でli要素の前にあるカウンターカウンターを呼び出すことにより、順序付けされていないリストの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>