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>

响应式设计

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.