Tipografía
Utilidades para controlar el desfase del subrayado de un 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 desfase del subrayado de un texto:
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
El veloz zorro marrón salta sobre el perro perezoso.
<p class="underline underline-offset-1">El veloz zorro marrón...</p><p class="underline underline-offset-2">El veloz zorro marrón...</p><p class="underline underline-offset-4">El veloz zorro marrón...</p><p class="underline underline-offset-8">El veloz zorro marrón...</p>Usa la sintaxis underline-offset-[<value>] para establecer el/la text underline offset basándose 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 añade la función var() por ti automáticamente.
Antepone a la utilidad text-underline-offset el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<p class="underline md:underline-offset-4 ..."> Lorem ipsum dolor sit amet...</p>Obtén más información sobre el uso de variantes en la documentación de variantes.