CSS text-underline-offset
The text-underline-offset property controls the distance between text and its underline. It is useful for making links more readable and for matching underline spacing to a design system.
Syntax
text-underline-offset: auto;
text-underline-offset: 0.15em;
text-underline-offset: 4px;Example
a {
text-decoration-line: underline;
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
}Practical notes
Values in em scale with the font size, which usually makes underline spacing more consistent across headings, body text and buttons.
Pair this property with text-decoration-thickness when designing custom link styles. Underlines should look intentional, not like they are trying to escape the text.
When to use it
Use it when the default underline is too close to the letters or collides with descenders. Small values in em scale well with font size.