[CSS]OLリストの数字の前に色をぬる
タイトルではわかりづらいですが
要は下図みたいなことをCSSでやってみたってことです。
画像で再現しても良かったのですが
「CSSで」っていう前提があったので
なんとか実装してみました。
(もっとスマートなやり方がアリそうですが)
HTML側(抜粋)
<ol class="list"> <li><p>テスト<br />テスト</p></li> <li><p>テストテストテストテストテストテストテストテストテスト</p></li> <li><p>テスト</p></li> <li><p>テスト</p></li> <li><p>テスト</p></li> </ol>
CSS側
# No.01 ol.list { list-style-type: none; counter-reset: list_counter; } # No.02 ol.list li { line-height: 30px; width: 100px; } ol.list li:before { background: blue; width: 10px; display: block; content: " "; float: left; height: 30px; } ol.list li p { background-color: white; padding-left: 2em; text-indent: -1.2em; } # No.03 ol.list li p:before { counter-increment: list_counter; content: counter( list_counter ) ". "; }
解説
# No.01
対象のリストを生成したタイミングで
カウンターを初期化します。
# No.02
対象のリストタグ[li]の擬似要素[before]に
塗りたい色を背景色で定義します。
# No.03
対象のリスト内の要素[p]の擬似要素[before]に
インクリメント(1加算)したカウンターの値を表示します。