text-underline-offset

text-underline-offset changes an underline’s offset from its normal position. It does not position overlines or line-throughs.

Compare a small and larger offset

Both samples have the same font and underline. The second moves the line farther from the glyphs.

<p class="near">2px offset</p>
<p class="far">.3em offset</p>

p {
  font-size: 1.5rem;
  text-decoration: underline 2px #2563eb;
}
.near {
  text-underline-offset: 2px;
}
.far {
  text-underline-offset: 0.3em;
}

Scale an inherited offset with text size

A percentage is relative to 1em and inherits as a relative value. These separate links use the same inherited 20% rule but different font sizes.

<div class="links">
  <p><a href="#details">Normal text</a></p>
  <p><a class="large" href="#details">Larger text</a></p>
</div>
<p id="details">Both links arrive here.</p>

.links {
  text-underline-offset: 20%;
}
a {
  color: #1d4ed8;
  text-decoration: underline;
}
.large {
  font-size: 1.75rem;
}
a:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Values and defaults

The initial value is auto and the property is inherited. Lengths may be positive or negative; percentages use 1em in the element’s font and remain relative through inheritance. An em length computes to a length on its originating element, so inherited em and inherited percentage behavior differ. A decoration established on one box uses one offset across that box, even when descendant font sizes differ.

Common mistakes

A hard-coded 2px value is not a browser-default demonstration. Large offsets can collide with the next line; inspect line-height and wrapping. This is outside the text-decoration shorthand. For choosing an underline position below descenders or along vertical text, use text-underline-position.

Learn text-underline-position, line-height, and text-decoration.

Sources and browser support

MDN: text-underline-offset describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.