list-style-image

示例

基本示例

使用 list-image-[<value>] 语法来控制列表项的标记图像：

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5杯切碎的松露蘑菇</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>

响应式设计

Prefix a list-style-image utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

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

Learn more about using variants in the variants documentation.