ol,li,リストで括弧付の数字を作る方法

olのリストで()括弧付の数字リストを作りたかったので、こちらの方法で対応してみました。
わざわざ毎回()を入れなくていいので便利です。

  1. あいうえお
  2. かきくけこ
  3. さしすせそ

htmlで書くとこんな感じ。olリストにクラスを指定するだけで数字括弧を表示できるようになります。

<ol class="list_parentheses">
  <li>あいうえお</li>
  <li>かきくけこ</li>
  <li>さしすせそ</li>
</ol>

CSSはこちらになります。

ol.list_parentheses{
  padding:0 0 0 2em;
  margin:0;
}
ol.list_parentheses li{
  list-style-type:none;
  list-style-position:inside;
  counter-increment: cnt;
}
ol.list_parentheses li:before{
  display: marker;
  content: "(" counter(cnt) ") ";
}
目次

括弧の種類

いろいろな括弧がありますのでご参考までにー

記号英語日本語
( )parentheses, round brackets丸括弧
[ ]brackets, square brackets角括弧
{ }braces, curly brackets波括弧
< >chevrons, angle brackets山括弧
「 」angles鍵括弧
【 】隅付き括弧
  • URLをコピーしました!
目次