初めに
何かしらのウェブページをコーディングしている時、連番が必要な場合があると思います。
手動でつけたり、JavaScriptやバックエンド側で生成する方法も回答ですが、
HTML又はCSSだけで連番の追加は可能です。
自分もつい先日知ったので、ここでまとめたいと思います。
リスト（箇条書き）で表せそうなコンテンツの場合
ol要素とli要素でlist形状にしましょう。
少し詳しく
ul要素を使って連番をつけているコードがありますが、あまり意味がないです。
ol要素というのがありまして、これは項目の順序付きリストを表します。
また、大抵はブラウザ上で連番ありの状態で表示されます。
連番を振りたい時は、順序に意味のあるリスト（箇条書き）だと思いますので、HTMLとしても意味のとおるolを使用するのが、簡単でHTMLとしても正しいコーディングだと思います。
実コードのサンプル
html
<ol>
<li>aaa</li>
<li>aaa</li>
<li>aaa</li>
</ol>
結果
1.aaa
2.aaa
3.aaa
olを使用しても連番が表示されない場合は、ページ全体のstyleをresetしたり統一する為のstyleで、連番を表示しないようにしている可能性があるります。
この場合は、styleの状況を確認して、olかliにlist-style: decimalを追加してください。
参考：https://developer.mozilla.org/ja/docs/Web/CSS/list-style-type
見出しみたいなlist以外のものに連番を振りたいです。
今回の本題です。
listの場合はolでいけますが、見出しや普通の文章の場合は別のやり方になります。
使用するものは、CSSカウンターとよばれるものです。
styleは、
counter-reset
counter-increment
になります。
サンプル
See the Pen CSS counter by H.N (@H_Naito) on CodePen.
少し詳しく
CSSカウンターはCSSが管理する変数で、CSSルールが何回使用されているかを追跡します。
これを表示する事で、連番がふられているように見せます。
counter-resetはCSSカウンターに対して、与えられた値（デフォルト:0）で初期します。
counter-incrementは、指定された値（デフォルト:1）でカウンターを増減させます。
コーディングの流れ
1.連番を振りたいセクション（not section要素）の親要素に、counter-resetを使用してカウンターを設置/初期化します。
2.counter-resetを設定した要素の子/孫要素の内、連番を振りたい要素にcounter-incrementを設定します。
3.contentを使用して連番を表示します。
コード
CSS
.sample1 {
/* 'hoge' というカウンターを0で初期化 */
counter-reset: hoge;
}
h3::before {
/* hogeカウンターの値に1(デフォルト値)を加算 */
counter-increment: hoge;
/* 表示 なおカンマを追加してます */
content: counter(hoge)", ";
}
.sample2 {
/* 10で初期化*/
counter-reset: huga 10;
}
h4::before {
/* -1していく */
counter-increment: huga -1;
/* （）付で表示 */
content: "("counter(huga)") ";
}
HTML
<div class="sample1">
<h3>Introduction</h3>
<h3>Body</h3>
<h3>Conclusion</h3>
</div>
<hr>
<div class="sample2">
<h4>Introduction</h4>
<h4>Body</h4>
<h4>Conclusion</h4>
</div>
結果
1, Introduction
2, Body
3, Conclusion
(9) Introduction
(8) Body
(7) Conclusion
カウンターは入れ子にする事もできます
詳細はこちらです。
CSS カウンターの使用：カウンターの入れ子
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters#Nesting_counters
参考
CSS カウンターの使用
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Counters
counter-reset
https://css-tricks.com/almanac/properties/c/counter-reset/
counter-incrementでリストではない要素にも連番を振る
https://qiita.com/ymk83/items/31ff9ee30d8fabdf2616