text-underline-offset
En esta página
| Clase | Propiedades CSS |
|---|---|
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>; |
Examples#
Basic example#
Use underline-offset-<number> utilities like underline-offset-2 and underline-offset-4 to change the offset of a text underline:
{
underline-offset-1
The quick brown fox jumps over the lazy dog.
underline-offset-2
The quick brown fox jumps over the lazy dog.
underline-offset-4
The quick brown fox jumps over the lazy dog.
underline-offset-8
The quick brown fox jumps over the lazy dog.
<!-- [!code classes:underline-offset-1] -->
<p class="underline underline-offset-1">The quick brown fox...</p>
<!-- [!code classes:underline-offset-2] -->
<p class="underline underline-offset-2">The quick brown fox...</p>
<!-- [!code classes:underline-offset-4] -->
<p class="underline underline-offset-4">The quick brown fox...</p>
<!-- [!code classes:underline-offset-8] -->
<p class="underline underline-offset-8">The quick brown fox...</p>