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