1. Типография
  2. list-style-image

Типография

list-style-image

Утилиты для управления изображениями маркеров для элементов списка.

ClassStyles
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 чашек нарезанных грибов порчини
  • 1/2 чашки оливкового масла
  • 3 фунта сельдерея
<ul class="list-image-[url(/img/checkmark.png)]">  <li>5 чашек нарезанных грибов порчини</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>

Адаптивный дизайн

Префикс a list-style-image утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

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

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков