text-underline-offset
Move underline paint independently of text layout and line thickness.
Overview
| Class | Declarations |
|---|---|
text-underline-offset:<offset> | text-underline-offset: <offset>;
|
Examples
Move underline away from text
text-underline-offset moves underline paint relative to its reference position. Compare 2px and 6px offsets on the same text and line thickness.
<!-- Underline offset · 2px --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:2px text-underline-offset:2px"> Typography</p><!-- Underline offset · 6px --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:2px text-underline-offset:6px"> Typography</p>Generated CSS
@layer utilities { .text-underline-offset\:6px { text-underline-offset: 6px }}Offset does not add margin, padding or line height. It affects underlines, not overlines or strike-throughs.
Pair with decoration thickness
Choose the line weight and offset independently. This pair uses the same 4px offset with a 1px or 3px underline.
<!-- 4px offset · 1px thickness --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:1px text-underline-3xs"> Typography</p><!-- 4px offset · 3px thickness --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:3px text-underline-3xs"> Typography</p>text-underline-3xs uses the preset’s 0.25rem spacing token. At the default 16px root size that is 4px.
Reset in compact contexts
Resize past sm to reset this underline’s offset from 6px to zero. The line box stays the same size; only the underline position changes.
<!-- 6px offset · zero at sm --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:2px text-underline-offset:6px text-underline-offset:0@sm"> Typography</p>Zero is not auto. With the default underline position, zero starts at the alphabetic baseline and can meet the glyphs; use auto when the browser should choose the position.
Apply conditionally
Hover or focus to move the underline from 2px to 6px. Print returns to 2px. The visible focus outline remains separate from the decoration.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl underline text-decoration-thickness:2px text-underline-offset:2px text-underline-offset:2px@print text-underline-offset:6px:hover@screen text-underline-offset:6px:focus-visible@screen"> Typography</button>