Типография
Утилиты для управления стилем маркеров списка.
| Class | Styles |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<custom-property>) | list-style-type: var(<custom-property>); |
list-[<value>] | list-style-type: <value>; |
Используйте утилиты типа list-disc и list-decimal для управления стилем маркеров в списке:
<ul class="list-disc"> <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li> <!-- ... --></ul><ol class="list-decimal"> <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li> <!-- ... --></ol><ul class="list-none"> <li>Теперь это история о том, как моя жизнь перевернулась с ног на голову</li> <!-- ... --></ul>Используйте синтаксис list-[<value>] , чтобы задать marker на основе полностью пользовательского значения:
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>Для переменных CSS вы также можете использовать синтаксис: list-(<custom-property>)
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>Это просто сокращение, list-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a list-style-type утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>Подробнее об использовании вариантов читайте в документации по вариантам.