ミギムキ

[CSS] 順序付きリストの数字を丸数字にしたい

丸数字リスト

サンプルコード

html

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

CSS

.list_circle_num { padding: 0px; margin: 0px; list-style: none; counter-reset: list_circle_num_counter; } .list_circle_num > li { position: relative; padding: 0px 0px 0px 2em; counter-increment: list_circle_num_counter; } .list_circle_num > li:before { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: calc(1.5em); height: calc(1.5em); border: 1px solid #000; font-weight: bold; border-radius: 50%; text-align: center; line-height: 1; content: counter(list_circle_num_counter); } .list_circle_num > li + li { margin: 1em 0px 0px; }

塗りつぶしの丸数字リスト

塗りつぶし版の丸数字リスト .list_circle_num { padding: 0px; margin: 0px; list-style: none; counter-reset: list_circle_num_counter; } .list_circle_num > li { position: relative; padding: 0px 0px 0px 2em; counter-increment: list_circle_num_counter; } .list_circle_num > li:before { display: flex; justify-content: center; align-items: center; position: absolute; top: 50%; left: 0px; transform: translateY(-50%); width: calc(1.5em); height: calc(1.5em); background-color: #000; color: #fff; font-weight: bold; border-radius: 50%; text-align: center; line-height: 1; content: counter(list_circle_num_counter); } .list_circle_num > li + li { margin: 1em 0px 0px; }
スポンサー広告

コードの解説・仕組み