html<ol class="paren"> <li>あか</li> <li>あお</li> <li>きいろ <ol class="paren"> <li>たんぽぽ</li> <li>ひまわり</li> </ol> </li> </ol> css.paren{ counter-reset:item; list-style:none; } .paren li:before{ content:"(" counters(item, "-") ")"; counter-increment:item; margin-right:0.5em; } .paren li{ padding-left:1.5em; text-indent:-1.5em; } バリエーションcss "li:before" の content 部分を変えれば, 括弧と区切り文字を自由に設定できます. content:"(" co