CSS

The CSS counter() function is used to manage automatic numbering of items within a webpage.

counter() [function]

　counter()関数は、ウェブページ内でカウンターを使って要素（項目など）の番号付けを自動的に管理するための機能です。例えば、章や節の番号、リスト項目の番号などを自動で付けたい場合に便利です。この機能を使うと、HTMLを修正することなく、CSSだけで番号を付けたり、スタイルを変更したりできます。

syntax

content: counter(counter_name);
content: counter(counter_name, list_style_type?);

counter_name: カウンタの名前です。
list_style_type（オプション）: カウンタの値の表示形式を指定します（例: decimal, lower-roman, upper-alphaなど）。

Sample

　例として、HTMLで定義した３つの節に対して、自動的に「Section 1.」、「Section 2.」、「Section 3.」と番号を付けるサンプルコードを示します。

Introduction

This is the introduction section.

Body

This section discusses the main topic.

Conclusion

This section summarizes the discussion.

HTML

<h2>Introduction</h2>
<p>This is the introduction section.</p>
<h2>Body</h2>
<p>This section discusses the main topic.</p>
<h2>Conclusion</h2>
<p>This section summarizes the discussion.</p>

CSS

body {
	counter-reset: section;  /* セクションカウンターをリセット */
	margin: 20px;
}
h2 {
	counter-increment: section;  /* カウンターを1増やす */
	margin: 10px 0;
}
h2::before {
	content: "Section " counter(section) ". ";  /* カウンターの値を表示 */
	font-weight: bold;
}

カウンターのリセット: bodyタグに counter-reset: section; を設定して、ページのカウンターをリセットします。ここで sectionはカウンターの名前です。
カウンターの増加: h2タグに counter-increment: section; を設定して、このタグが現れるたびに sectionカウンターを1増やします。
番号の表示: h2タグの ::before疑似要素を使用して、contentプロパティに "Section " counter(section) ". "; を設定します。これにより、各 h2 の前に Section X. の形式で番号が自動的に挿入されます。