list-style-image

例

基本的な例

list-image-[<value>] 構文を使用して、リスト項目のマーカー画像を制御します

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

CSS変数を使用する

list-image-(<custom-property>) 構文を使用して、CSS変数を使ってリスト項目のマーカー画像を制御します

<ul class="list-image-(--my-list-image)">
  <!-- ... -->
</ul>

これは list-image-[var(<custom-property>)] の短縮形であり、var() 関数を自動的に追加します。

マーカー画像を削除する

list-image-none ユーティリティを使用して、リスト項目から既存のマーカー画像を削除します

<ul class="list-image-none">
  <!-- ... -->
</ul>

レスポンシブデザイン

プレフィックスa list-style-image ユーティリティ md: のようなブレークポイントバリアントを使用して、ユーティリティを適用するのはmedium 画面サイズ以上の場合のみです

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">
  <!-- ... -->
</div>

バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。