CSSカウンタの使用
CSSカウンタは、「変数」のようなものです。 変数の値は、（それらが使用される回数を追跡するもの）CSSルールだけ増分することができます。
CSSカウンタで作業するために、我々は、次のプロパティを使用します。
-
counter-reset-カウンタを作成またはリセット -
counter-increment-カウンタ値をインクリメント -
content-インサートは、コンテンツを生成し -
counter()またはcounters()関数は-要素にカウンタの値を追加します。
CSSカウンタを使用するには、最初に作成する必要がありますcounter-reset 。
次の例では、（身体セレクタで）ページ用のカウンタを作成し、その後、それぞれのためのカウンタ値をインクリメント<h2>要素を追加しますと"Section < value of the counter >:"各の先頭に<h2>要素を：
例
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
»それを自分で試してみてください ネスティングカウンタ
次の例では、ページ（セクション）のための1つのカウンタとそれぞれに1つのカウンタ作成<h1>要素（サブセクションを）。 "section"カウンタは、それぞれにカウントされます<h1>を持つ要素"Section < value of the section counter >." 、および"subsection"カウンタはそれぞれにカウントされます<h2>を持つ要素"< value of the section counter >.< value of the subsection counter >"
例
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
} »それを自分で試してみてください カウンタの新しいインスタンスが自動的に子要素に作成されるため、カウンタも概説リストを作るのに役立ちます。 ここでは、使用するcounters()ネストされたカウンターの異なるレベル間の文字列を挿入する機能：
例
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
} »それを自分で試してみてください CSSカウンタのプロパティ
| プロパティ | 説明 |
|---|---|
| content | ::と::疑似要素の後、挿入する前に、生成されたコンテンツと一緒に使用 |
| counter-increment | インクリメント一つ以上のカウンタ値 |
| counter-reset | 作成または1つ以上のカウンタをリセットします |