番号つきリストをデザイン
公開日:2022年08月01日
更新日:2023年11月27日
マーカーの数字を (1) (2) … にする
擬似要素「::before」とカウンターを使って実装します。
HTML
<ol class="number">
<li>番号つきリスト</li>
<li>番号つきリスト</li>
<li>番号つきリスト</li>
</ol>CSS
.number {
counter-reset: number;
list-style: none;
padding-left: 0;
}
.number li {
position: relative;
padding-left: 40px;
}
.number li::before {
counter-increment: number;
content: '（' counter(number) '）';
position: absolute;
left: 0;
}
参考：CSS カウンターの使用
マーカーのみデザインを変更
擬似要素「::maker」を使ってデザインを定義します。
HTML
<ol>
<li>番号つきリスト</li>
<li>番号つきリスト</li>
<li>番号つきリスト</li>
</ol>CSS
li::marker {
color: #f00;
}
参考：::marker
同じカテゴリーのコンテンツ
