(例)【CSS】counter-resetの使用方法
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>
<h3>ランキング</h3>
<dl>
<dt class="sample1">炭水化物</dt><dd>ご飯</dd>
<dt class="sample1">たんぱく質</dt><dd>牛肉</dd>
<dt class="sample1">脂質</dt><dd>マヨネーズ</dd>
</dl>
dt.sample1:before {
counter-increment:sample;
content:counter(sample) "位 ";
}
h3 {counter-reset:sample;}
【CSS】counter-reset :要素の連番(カウンタ)の値をリセットする
CSSのcounter-resetは、要素の連番(カウンタ)をリセットするプロパティです。
counter-resetプロパティを使用した要素が現われる毎にカウンタの値が0にリセットされます。 カウンタ名の後に半角スペースで区切り整数値を指定すると、カウンタの値がその数にリセットされます。