【HTML】olタグをCSSで連番を表示

どうも、くまだです。

olタグを使って(1),(2)…みたいな感じで()のナンバーの部分をCSSで連番する方法について書きます。

olタグをCSSで連番を表示

例えば、()の中の数字を以下のような感じで表示できます。

<ol>
  <li>aaaa</li>
  <li >ｂｂｂ</li>
</ol>

ol {
  list-style-type: none;
  counter-reset: count 0;
}

ol li:before {
  counter-increment: count 1;
  content: "(" counter(count) ") ";
}

counter-reset: count 0;

で要素の連番（カウンター）を初期化します。

counter-increment: count 1;

の部分で最初に指定したカウンタ名（count 0 のcountの部分)を、counter-incrementで指定してやると、要素が表示するたびに値が増加します。

content: "(" counter(count) ") ";

のcounter(count)部分で要素の数だけ数字が増減します。

なお、カウンタ名は独自で決められるようで、カウント名を「test」とかにしても正常に表示されます。

ol {
  list-style-type: none;
  counter-reset: test 0;
}

ol li:before {
  counter-increment: test 1;
  content: "(" counter(test) ") ";
}

数字を減らす場合は、

ol {
  list-style-type: none;
  counter-reset: test 0;
}

ol li:before {
  counter-increment: test -1;
  content: "(" counter(test) ") ";
}

マイナスの値を指定すれば下記画像のような感じで-1ずつ減少、みたいな表示ができます。増減の値を変更すれば、2ずつ増やす、とかもできます。

ここまで読んでくださりありがとうございました。