Typography
list-style-image
控制列表项标记图像的功能类。
| Class | Styles |
|---|---|
list-image-[<value>] | list-style-image: <value>; |
list-image-(<custom-property>) | list-style-image: var(<custom-property>); |
list-image-none | list-style-image: none; |
示例
基础示例
使用 list-image-[<value>] 语法来控制列表项的标记图像：
- 5 cups chopped Porcini mushrooms
- 1/2 cup of olive oil
- 3lb of celery
<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.
