list-style-image

範例（Examples）

基本範例（Basic example）

使用 list-image-[<value>] 語法來控制列表項目的標記圖片：

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

使用 CSS 變數（Using a CSS variable）

使用 list-image-(<custom-property>) 語法來透過 CSS 變數控制列表項目的標記圖片：

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

這只是 list-image-[var(<custom-property>)] 的簡寫形式，會自動為您加上 var() 函式。

移除標記圖片（Removing a marker image）

使用 list-image-none 通用類別來移除列表項目的現有標記圖片：

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

響應式設計（Responsive design）

在 list-style-image 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：

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

在變體文件中了解更多關於使用變體的資訊。