Tipografía
Utilidades para controlar el desplazamiento de un subrayado de texto.
| Clase | Estilos |
|---|---|
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>; |
Usa utilidades underline-offset-<number> como underline-offset-2 y underline-offset-4 para cambiar el desplazamiento de un subrayado de texto:
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
El rápido zorro marrón salta sobre el perro perezoso.
<p class="underline underline-offset-1">El rápido zorro marrón...</p><p class="underline underline-offset-2">El rápido zorro marrón...</p><p class="underline underline-offset-4">El rápido zorro marrón...</p><p class="underline underline-offset-8">El rápido zorro marrón...</p>Usa la sintaxis underline-offset-[<value>] para establecer el text underline offset basado en un valor completamente personalizado:
<p class="underline-offset-[3px] ..."> Lorem ipsum dolor sit amet...</p>Para variables CSS, también puedes usar la sintaxis underline-offset-(<custom-property>) :
<p class="underline-offset-(--my-underline-offset) ..."> Lorem ipsum dolor sit amet...</p>Esto es solo un atajo para underline-offset-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Prefija una utilidad text-underline-offset con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>Aprende más sobre el uso de variantes en la documentación de variantes.