【CSS】ul liのリストを見出しのように表示させたい

CSS

css
ミニマリスト_カミ

kamiです。
TwitterYoutubeもやってます。

今回はリストの見出しの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; // マーカーの色
    }
  }
}

CSSCSS

Posted by kami