text-underline-position

text-underline-position chooses the position of an existing underline. Under places it below descenders; left and right choose sides in vertical writing. They do not turn horizontal underlines into overlines.

Compare auto with under

The descenders in gyp make the difference easier to inspect. Under positions the line below them rather than touching the baseline.

<p class="auto">gyp — auto</p>
<p class="under">gyp — under</p>

p {
  font:
    2rem Georgia,
    serif;
  text-decoration: underline 2px #2563eb;
}
.auto {
  text-underline-position: auto;
}
.under {
  text-underline-position: under;
}

Choose a side for vertical text

Both samples use vertical-rl. Left and right place the underline on the corresponding physical side of the text.

<p class="left">Left side</p>
<p class="right">Right side</p>

p {
  writing-mode: vertical-rl;
  height: 150px;
  display: inline-block;
  padding: 0.75rem;
  text-decoration: underline 2px #2563eb;
}
.left {
  text-underline-position: left;
}
.right {
  text-underline-position: right;
}

Values and defaults

The initial value is auto and the property is inherited. Auto lets the browser choose the position. From-font uses font metrics when available and otherwise falls back to auto. Under avoids descenders. Left/right apply to vertical writing and behave like auto in horizontal writing. Some combinations and from-font have separate compatibility histories.

Common mistakes

There is no “above the text” meaning for left/right in horizontal writing; overline is a different text-decoration-line value. This property does not create an underline. It is outside the text-decoration shorthand. Font metrics and text-underline-offset can affect the final appearance, so test the actual language and font.

Learn writing-mode, text-underline-offset, and text-decoration-line.

Sources and browser support

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