ミギムキ

[CSS] 連番リスト(olタグ)の番号にスタイルを設定したい

やりたいこと

サンプルコード

html

<ol class="ex_order"> <li>ファントムブラッド</li> <li>戦闘潮流</li> <li>スターダストクルセイダース</li> </ol>
スポンサー広告

CSS

.ex_order { padding: 0px; margin: 0px; counter-reset: list_num; list-style: none; } .ex_order > li { position: relative; padding: 0px 0px 0px 3em; line-height: 2; } .ex_order > li:nth-of-type(n + 2) { margin-top: 1em; } .ex_order > li:before { display: flex; justify-content: center; align-items: center; position: absolute; top: 0px; left: 0px; width: 2em; height: 2em; background-color: #3388dd; color: #fff; font-weight: bold; counter-increment: list_num; content: counter(list_num); }

仕組み、解説、補足など

スポンサー広告