text-underline-position

Definition

The text-underline-position CSS property is used to control the position of underlines applied to text. It allows you to specify whether the underline should be positioned below the text (the default behavior) or above the text.

The text-underline-position property accepts the following values:

auto: This is the default value. The underline is positioned below the text, with a small gap between the text and the underline.
under: The underline is positioned below the text, directly touching the baseline of the text.
left: The underline is positioned above the text, parallel to the baseline, with a small gap between the text and the underline.
right: The underline is positioned above the text, parallel to the baseline, with a small gap between the text and the underline.

Here’s an example:

.underlined-text {
  text-underline-position: under;
}

In this example, the .underlined-text class sets the text-underline-position property to under, positioning the underline below the text without any gap.

It’s important to note that the text-underline-position property may have limited support across different browsers and may not be widely supported in older browser versions. Additionally, the effect of changing the underline position may vary depending on the font and other text styling properties.

The text-underline-position property is primarily used for typographic or design purposes when you want to modify the position of underlines for specific text elements. It can be helpful in cases where you want to achieve a unique or customized visual appearance for underlined text.

However, keep in mind that changing the underline position can affect the legibility and readability of text, especially if the underline intersects with descenders or ascenders of letters. It’s important to consider the overall design and ensure that the modified underline position enhances the visual presentation without compromising readability or accessibility.

Syntax

ruby {
  text-underline-position: under;
}

Values

auto: browser default underline placement.
from-font: use the font-defined underline metrics when available.
under: draw the underline below descenders (common for CJK scripts).
left / right: adjust underline for vertical writing modes.

Practical Examples

.locale-ja a {
  text-decoration: underline;
  text-underline-position: under;
}

Position underlines to avoid colliding with glyph descenders in specific languages or vertical writing.

HTML

Auto underline Underline under

Code

<div class="grid gap-4 sm:grid-cols-2 text-lg text-slate-900">
  <a href="#" style="text-decoration: underline; text-underline-position: auto;">Auto underline</a>
  <a href="#" style="text-decoration: underline; text-underline-position: under;">Underline under</a>
</div>

Tips & Best Practices

Use under for CJK content or ruby annotations to improve clarity.
Combine with text-decoration-skip-ink and text-underline-offset for precise underline styling.
Fonts without underline metrics may ignore from-font; verify across typography choices.

Accessibility & UX Notes

Clear underline placement helps users quickly identify links without glyph interference.

Browser Support

Supported in modern browsers (Chrome 90+, Firefox 70+, Safari 15+); older engines may ignore the property.

text-underline-offset for distance adjustments.
text-decoration-skip-ink to skip descenders.
writing-mode and text-orientation when working with vertical text.