Типография
Утилиты для управления изображениями маркеров для элементов списка.
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>
Подробнее об использовании вариантов читайте в документации по вариантам.