CSS text-underline-offset Property

The text-underline-offset property controls the vertical placement of an underline produced by text decoration relative to the text glyphs. Rather than changing whether an underline is present, it adjusts how far the line sits from the characters so you can fine-tune the visual relationship between the mark and the letterforms. This is particularly useful when working with fonts that have deep descenders, unusual metrics or when a design calls for underlines that appear detached or closely hugging the text.

Because text-underline-offset only modifies the position of the decoration, it is often used together with other typographic properties to achieve a balanced result. For example, the presence and style of an underline are controlled by text-decoration, and the default underline placement can be influenced by text-underline-position. The perceived spacing between underline and letters also depends on font metrics such as font-size and the layout height set by line-height, while the visual weight of the line is set with text-decoration-thickness. Adjusting these together yields consistent, intentional results across different typefaces and sizes.

In practice, you can use text-underline-offset for subtle typographic polishing—moving the underline away from descenders to prevent overlap, creating distinct link underlines, or aligning underlines across mixed font stacks. It also supports creative treatments: animating the offset produces floating underline effects, and combining offsets with custom thickness or dashed styles creates varied visual rhythms. Keep accessibility and legibility in mind — underlines that are too far removed can become visually disconnected from the text they annotate, and underlines that are too close can clash with glyphs, so adjustments should preserve recognizability and sufficient contrast.