多くのタイプのコンテンツは、HTML のリストとして表すのが最適です。レシピの手順や記事の脚注など、順序付きリストのコンテンツの場合、マーカーにも情報が含まれていることがよくあります。CSS には、リスト内のカウンタを制御する方法がいくつか用意されています。
スタイルの一覧表示
数値、アルファベット、ローマ数字、および多くの国際的なカウント システムをサポートする、さまざまな事前定義されたリスト スタイル タイプがあります。
ブラウザでサポートされているスタイルに加えて、W3C は Ready-made Counter Styles を公開しており、45 の書記体系で 181 の追加スタイルをサポートしています。
これらのオプションがニーズに合わない場合は、カスタム @counter-style を定義することもできます。これにより、カスタム記号、接頭辞、接尾辞などを指定できます。
デフォルトでは、アイテム マーカーはリストの outside で、リストの前に配置され、右揃えになります。list-style-position: inside を使用して、アイテム マーカーをリスト内に配置することもできます。
カウンタ
リストスタイルではリスト項目のマーカーの表示方法を制御できますが、カウンターでは表示する値を制御できます。<li> リスト項目要素の場合、ブラウザは list-item というカウンタを作成し、リスト項目が検出されるたびに 1 ずつインクリメントします。
CSS カウンタは、対応する counter-increment 値が設定された要素がレンダリングされた回数をカウントします。
新しいカウンタを作成するには、カウンタ名と（必要に応じて）初期値を指定して counter-reset を使用します。通常、これは、カウントされるすべての要素を保持する親要素に設定します。
次に、カウントする各要素に counter-increment プロパティを追加します。
最後に、counter() 関数を使用してカウンタ値を表示します。
この例では、各脚注のリンクテキストとして脚注の実行カウントを表示します。ドキュメント全体で 1 つのカウンタを使用するため、本文に counter-reset: note を設定し、各脚注リンクでインクリメントします。
複数のカウンタで異なる項目をカウントすることもできます。脚注の例で、脚注があるセクションと段落のインデックスを表示したい場合はどうすればよいでしょうか？
セクション数は、counter-reset を使用して本文に作成し、各 <h2> 要素でインクリメントできます。段落のカウントをセクションごとにリセットしたいので、<h2> 要素で counter-reset を使用し、<p> 要素でインクリメントします。
最後に、content プロパティでカウンタ値を結合します。
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
ネストされたカウンタ
リストの中にリストをネストするとどうなりますか？list-item カウンタは <ul> または <ol> 要素ごとに初期化され、counter() を使用すると最も内側のカウント数のみが返されます。ネストされた各カウンタのカウントを表示する場合は、カウンタ名と区切り文字を受け取る counters() 関数を使用します。
li::marker {
content: counters(list-item, ".")
}
カウンタを反転させる
デフォルトでは、カウンタ（<ol> 要素の暗黙的な list-item カウンタを含む）は 0 から始まり、要素ごとに 1 ずつカウントアップされます。つまり、最初の要素は 1 としてカウントされます。1 までカウントダウンしたい場合はどうすればよいでしょうか？
そのためには、<ol> に reversed 属性を追加します。標準のリストスタイルを使用している場合、マーカーは想定どおりに機能します。ただし、カスタム カウンタを使用している場合は、counter-increment を負の値に設定し、カウンタの開始値を手動で計算する必要があります。