1. Типография
  2. text-underline-offset

Типография

text-underline-offset

Утилиты для управления смещением подчеркивания текста.

ClassStyles
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 для изменения смещения подчеркивания текста:

underline-offset-1

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

underline-offset-2

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

underline-offset-4

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

underline-offset-8

Быстрая коричневая лиса перепрыгивает через ленивую собаку.

<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>

Подробнее об использовании вариантов читайте в документации по вариантам.

Авторские права © 2025 Tailwind Labs Inc.·Политика в отношении товарных знаков