リストタグで用意されているようで用意されていない括弧付き数字リストの実現方法。
(1)アメージング
(2)アメージング
(3)アメージング
みたいな感じにする方法
■HTML側
1 2 3 4 5 |
<ol class="list_parentheses"> <li>アメージング</li> <li>アメージング</li> <li>アメージング</li> </ol> |
■CSS側
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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) ") "; } |