【CSS】リストの連番を丸括弧で囲った数字で表示する

HTMLのリストの項番を括弧付き数字で表示する方法

リストの連番を (1) のように表示したい場合のCSSの記述方法をググってみたものの、インデントが崩れるなど、イケてるコードが無かったので自分で考えてみた。

結論

css stye.css

ol.hoge li {
  position: relative;
  list-style-type: none;
}

ol.hoge li:before {
  position: absolute;
  right: calc(100% + 0.5rem);  /* 0.5remは連番とテキストとの余白 */
  content: "(" counter(list-item) ")";
}

html index.html

<ol>
  <li>fuga</li>
  <li>fuga</li>
  <li>fuga</li>
</ol>
<ol class="hoge">
  <li>hoge</li>
  <li>hoge</li>
  <li>hoge</li>
</ol>

完成物

連番の表示には多くの記事で記載されている通りli:beforeを用いるのがベストっぽい。

li:beforeの配置については、liを基準に右から100% + 余白分の位置に固定することで、連番の値が二桁以上になってもテキストと連番が重ならず、インデントが崩れるのを防げる。

list-itemは、olのリストがデフォルトで保持しているカウンター。