Типография
Утилиты для управления смещением подчеркивания текста.
| Class | Styles |
|---|---|
underline-offset-<number> | text-underline-offset: <number>px; |
-underline-offset-<number> | text-underline-offset: calc(<number>px * -1); |
underline-offset-auto | text-underline-offset: auto; |
underline-offset-(<custom-property>) | text-underline-offset: var(<custom-property>); |
underline-offset-[<value>] | text-underline-offset: <value>; |
Используйте утилиты underline-offset-<number> типа underline-offset-2 и underline-offset-4 для изменения смещения подчеркивания текста:
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
Быстрая коричневая лиса перепрыгивает через ленивую собаку.
<p class="underline underline-offset-1">Быстрая коричневая лиса...</p><p class="underline underline-offset-2">Быстрая коричневая лиса...</p><p class="underline underline-offset-4">Быстрая коричневая лиса...</p><p class="underline underline-offset-8">Быстрая коричневая лиса...</p>Используйте синтаксис underline-offset-[<value>] , чтобы задать text underline offset на основе полностью пользовательского значения:
<p class="underline-offset-[3px] ..."> Lorem ipsum dolor sit amet...</p>Для переменных CSS вы также можете использовать синтаксис: underline-offset-(<custom-property>)
<p class="underline-offset-(--my-underline-offset) ..."> Lorem ipsum dolor sit amet...</p>Это просто сокращение, underline-offset-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a text-underline-offset утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>Подробнее об использовании вариантов читайте в документации по вариантам.