（）（括弧）付き数字リスト

2016/12/2 HTML, CSS

リストタグで用意されているようで用意されていない括弧付き数字リストの実現方法。

(1)アメージング

(2)アメージング

(3)アメージング

みたいな感じにする方法

■HTML側

<ol class="list_parentheses">
  <li>アメージング</li>
  <li>アメージング</li>
  <li>アメージング</li>
</ol>

<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) ") ";
}

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) ") ";

}