olタグで丸括弧（）付きの数字にしたかったので、CSSで設定する方法を調べてみました。いろいろと試した結果、下記の設定で上手くいったのでメモしておきます。CSSの書き方によっては、２行目のインデントが無くなってしまうものもありました。下のCSSでは、２行目のインデントも有効です。
これで内容が増減しても括弧を入力しなくてもいいので便利になりました。
<!-- HTMLコード -->
<ol class="paren">
<li>あいうえお</li>
<li>かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ
かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ
かきくけこかきくけこかきくけこ</li>
<li>さしすせそ</li>
</ol>上のコードをブラウザで表示させると下の様になります。
↓ ↓ ↓
- あいうえお
- かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ かきくけこかきくけこかきくけこ
- さしすせそ
先頭の数字を丸括弧付きにしました。
↓ ↓ ↓
- あいうえお
- かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ かきくけこかきくけこかきくけこかきくけこかきくけこかきくけこ かきくけこかきくけこかきくけこ
- さしすせそ
CSS設定はこれ。
ol.paren {
list-style-type: none;
margin: 10px 0 2em 1em; //いい感じに数値を調整してね
}
ol.paren li {
counter-increment: cnt;
margin-bottom: 4px;
}
ol.paren li:before {
content: "（ " counter(cnt) " ）";
display:inline-block;
width: 3.4em; //いい感じに数値を調整してね
margin-left: -3.4em; //いい感じに数値を調整してね
}
