Типография
Утилиты для управления изображениями маркеров для элементов списка.
| 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>] для управления изображением маркера для элементов списка:
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 чашек нарезанных грибов порчини</li> <!-- ... --></ul>Используйте синтаксис 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>Префикс a list-style-image утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.