番号付きリストの番号部を装飾

番号付きリストの番号部を疑似要素に置き換え、装飾しやすくする。

デモページを表示

CSS

補足

• 3行目： list-style-type: none; で標準のマーカーを非表示にし、12行目：擬似要素で番号部を表示する。
• リストの番号は counter-reset、counter-increment、content で生成している。
• 共通定義（class="deco"）で、装飾のない通常の番号付きリストのスタイルになる。
• 個別定義（class="ranking"）で、番号部の位置や大きさ、装飾などを設定している。
• レイアウトが崩れる場合は リセットCSS・共通CSS の内容を確認。

HTML

補足

• 3行目：共通定義（class="deco"）だけの場合は、通常の番号付きリストのスタイル。
• 11行目：共通定義（class="deco"）＋個別定義（class="ranking"）で、番号部が装飾された状態になる。