HTMLの<ol>で 1. ではなく (1) とか 2) とか括弧付きで表示したい場合のメモ

通常の

タグ

<ol>
  <li>hoge</li>
  <li>fuga</li>
</ol>

表示

1. hoge
2. fuga

括弧付きの数字を表示させる

<style>
ol.bracket,
ol.closing_bracket {
  list-style-type: none;
}
ol.bracket > li,
ol.closing_bracket > li {
  counter-increment: cnt;
}
ol.bracket > li:before {
  content: "("counter(cnt) ") ";
}
ol.closing_bracket > li:before {
  content: counter(cnt) ") ";
}

<\style>
<ol class="bracket">
  <li>hoge</li>
  <li>fuga</li>
</ol>
<ol class="closing_bracket">
  <li>hoge</li>
  <li>fuga</li>
</ol>

表示

(1) hoge
(2) fuga
1) hoge
2) fuga

参考

• olタグのナンバリングをカッコつきにする