【CSS】ul liのリストを見出しのように表示させたい
今回はリストの見出しのulのliのiを見出しのように表示させることができるスタイリングです。
コピペで使えるのでぜひ参考にしてみてください。
ul liのリストのコード
<ul class="list">
<li>
<i class="suta">※</i>
1つ
</li>
<li>
<i class="asuta">※</i>
2つ
</li>
<li>
<i class="asuta">※</i>
3つ
</li>
<li>
<i class="asuta">※</i>
4つ<br />
終了です
</li>
</ul>
このスタイルを paymentselect__bullet-list に適用すると、各項目が※ マーカーで始まるようになります。各項目のスタイルや色を変更するには、color や font-size などのプロパティを調整してください
ul liのリストのスタイリング
.list {
li {
position: relative;
padding-left: 30px; // マーカーの左側の余白
margin-bottom: 10px; // 各項目の下の余白
i.icon {
position: absolute;
left: 0; // マーカーを左端に配置
color: red; // マーカーの色
}
}
}