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-(<自定义属性>) 语法来使用 CSS 变量控制列表项的标记图像

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

这只是 list-image-[var(<自定义属性>)] 的简写，会自动为你添加 var() 函数。

删除标记图像

使用 list-image-none 工具类来从列表项中删除现有的标记图像

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

响应式设计

前缀a list-style-image 工具类 使用像 md: 这样的断点变体，仅在中等 屏幕尺寸及以上应用该工具类

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

在 变体文档中了解有关使用变体的更多信息。