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