Типография
Утилиты для управления украшением текста.
Class | Styles |
---|---|
underline | text-decoration-line: underline; |
overline | text-decoration-line: overline; |
line-through | text-decoration-line: line-through; |
no-underline | text-decoration-line: none; |
Используйте утилиту underline
для добавления подчеркивания к тексту элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="underline">Быстрая коричневая лиса...</p>
Используйте утилиту overline
для добавления надчеркивания к тексту элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="overline">Быстрая коричневая лиса...</p>
Используйте утилиту line-through
для добавления зачеркивания к тексту элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="line-through">Быстрая коричневая лиса...</p>
Используйте утилиту no-underline
для удаления линии из текста элемента:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="no-underline">Быстрая коричневая лиса...</p>
Префикс a text-decoration-line
утилиты с вариантом, например hover:*
, чтобы применить утилиту только в этом состоянии:
Наведите на текст, чтобы увидеть ожидаемое поведение
<p>Быстрая <a href="..." class="no-underline hover:underline ...">коричневая лиса</a> перепрыгивает через ленивую собаку.</p>
Подробнее об использовании вариантов читайте в документации по вариантам.
Префикс a text-decoration-line
утилита с вариантом контрольной точки, например md:
, чтобы применить утилиту только при размерах экрана medium и выше:
<a class="no-underline md:underline ..." href="..."> <!-- ... --></a>
Подробнее об использовании вариантов читайте в документации по вариантам.