単純に(1)になればいい
kakko.css
ol {
list-style-type: none;
}
ol li {
counter-increment: cnt;
}
ol li:before {
content: "(" counter(cnt) ") ";
}
()部分が、list-style-position:insideてきな扱いになるのが嫌
kakko-outside.css
ol {
list-style-type: none;
margin-left: 3em; /* いい塩梅の幅を設定したまえ */
}
ol li {
counter-increment: cnt;
}
ol li:before {
content: "(" counter(cnt) ") ";
display:inline-block;
margin-left:-3em; /* いい塩梅の幅を設定したまえ */
width: 3em; /* いい塩梅の幅を設定したまえ */
}
ol > li の start属性を使いたい
以下のhtmlをカッコつきで表示したいとき、第二シーズンのstart属性が無視されて、1～の表示になっちゃう。
kakko.html
<h1>第一シーズン</h1>
<ol start="1">
<li>マックス誕生</li>
<li>殺人スポーツ・レイキング</li>
<li>謎の人体バンク</li>
</ol>
<h1>第二シーズン</h1>
<ol start="4">
<li>天才少年養成アカデミー</li>
<li>美人伝道師の誘惑</li>
<li>宿敵グロスバーグの逆襲</li>
</ol>
しょうがないので、jQueryで無理やり書き換えちゃう。
kakko.js
$("ol").each(function() {
var start = $(this).attr("start");
start = start - 1;
$(this).css({
'counterReset': 'cnt ' + start
});
});
しっかり見てないけど、IE8以降ぐらいなら動くんじゃないかな。