CSSによる番号付け

CSS

例えばdt要素の前に番号を付けたいとき。

dl{
  counter-reset: num;
}
dt:before{
  content: counter(num) ": ";
  counter-increment: num;
}


親要素のdlで、counter-resetして、dtの前にcounter(num)で数字表示、counter-incrementで数字を加算してる。numは識別子。
これで、例えば

<dl>
  <dt>柏餅</dt>
  <dd>一枚のふとんで中に折り込まれるように寝ること。</dd>

  <dt>堅焼</dt>
  <dd>堅く焼いたもの。またはカタヤキプレイのこと。</dd>

  <dt>カタヤキ(プレイ)</dt>
  <dd>数千円の転売利益の為の電器店オープンセール（イベント並びより優先</dd>
  <dd>渋谷での整理券大量買い占め。</dd>
  <dd>ファンでもないのにイベント参加。</dd>
  <dd>知り合いの知り合いへの挨拶回り。</dd>
  <dd>ご飯お替り自由の店で五膳以上食いつき。</dd>
  <dd>ほぼ定価での転売で趣味の梱包・発送を堪能。</dd>
  <dd>知り合いから転売情報収集。</dd>
</dl>

(意味ははてなキーワードより。)


こんな文章だと、、

1: 柏餅
一枚のふとんで中に折り込まれるように寝ること。
2: 堅焼
堅く焼いたもの。またはカタヤキプレイのこと。
3: カタヤキプレイ
数千円の転売利益の為の電器店オープンセール（イベント並びより優先
渋谷での整理券大量買い占め。
ファンでもないのにイベント参加。
知り合いの知り合いへの挨拶回り。
ご飯お替り自由の店で五膳以上食いつき。
ほぼ定価での転売で趣味の梱包・発送を堪能。
知り合いから転売情報収集。

こうなる。


これを使うのはどんなときが適切なのかはよくわからない。