CSS text-underline-position Property

Definition and Usage

The text-underline-position property controls where an underline sits relative to the text. Common values are auto (browser default) and under (clear of descenders and subscripts).

It is not part of the text-decoration shorthand and it inherits, so you can set under on :root for a whole page. You still need an underline from text-decoration-line.

CSS Syntax

You can combine a vertical keyword with a horizontal one, for example under left.

Property Values

How to Use text-underline-position

Draw an underline first, then choose where it sits. Position alone never creates a line.

1. Set text-decoration-line: underline.
2. Pick auto, under, or from-font for horizontal text.
3. Use left / right only with a vertical writing-mode.
4. Fine-tune distance with text-underline-offset after position is set.

Live Preview

Same underlined phrase with a subscript. Change only text-underline-position.

CSS Examples

Each snippet focuses on text-underline-position. Use Try It Yourself for a live editor.

<style>
  p {
    text-decoration-line: underline;
    text-underline-position: under;
  }
</style>

<p>H<sub>2</sub>O sample underline</p>

<style>
  p {
    text-decoration-line: underline;
    text-underline-position: auto;
  }
</style>

<p>H<sub>2</sub>O sample underline</p>

<style>
  p {
    writing-mode: vertical-rl;
    text-decoration-line: underline;
    text-underline-position: left;
  }
</style>

<p>Sample underline</p>

Key Takeaways