text-underline-offset

Definition

The text-underline-offset CSS property is used to control the positioning of the underline that is applied to text using the text-decoration: underline; property. It allows you to adjust the vertical offset or distance between the text and the underline.

Syntax

a {
  text-underline-offset: 0.2em;
}

Values

auto: default offset.
<length> / <percentage>: explicit distance from baseline.

Practical Examples

a {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

Increase offset to prevent underlines from touching glyph descenders.

HTML

Default offset Offset & thickness

Code

<div class="flex gap-6 text-lg text-slate-900">
  <a href="#" style="text-decoration: underline; text-underline-offset: 2px;">Default offset</a>
  <a href="#" style="text-decoration: underline; text-decoration-thickness: 0.18em; text-underline-offset: 0.28em;">Offset & thickness</a>
</div>

Tips & Best Practices

Combine with thicker lines to maintain readability.
Use consistent offsets across your design system for visual harmony.

Accessibility & UX Notes

Proper offsets keep underlines legible and avoid merging with characters.

Browser Support

Supported in modern browsers (Chrome 87+, Firefox 70+, Safari 14+).

text-decoration-thickness for weight.
text-decoration-color for contrast.
border-bottom fallback when offsets are unsupported.