import { ApiTable } from "@/components/api-table.tsx"; import { Example } from "@/components/example.tsx"; import { Figure } from "@/components/figure.tsx"; import { ResponsiveDesign, UsingACustomValue } from "@/components/content.tsx"; export const title = "text-underline-offset"; export const description = "Utilities for controlling the offset of a text underline."; ", "text-underline-offset: px;"], ["-underline-offset-", "text-underline-offset: calc(px * -1);"], ["underline-offset-auto", "text-underline-offset: auto;"], ["underline-offset-()", "text-underline-offset: var();"], ["underline-offset-[]", "text-underline-offset: ;"], ]} /> ## Examples ### Basic example Use `underline-offset-` 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.

} ```html

The quick brown fox...

``` ### Using a custom value ### Responsive design