1. css
  2. /properties
  3. /text-underline-position



The text-underline-position property adjusts the position of underlines applied using the underline; value of the text-decoration property. Although text-decoration is a shorthand for setting various text-decoration properties such as text-decoration-line, text-decoration-color, and text-decoration-style, it doesn't include text-underline-position.

This property is helpful for fine-tuning underlines, taking into account design requirements and particular use cases.

Examples and Usage

We'll showcase the text-underline-position property through two examples: one highlighting its use for underlining a chemical formula and another demonstrating left or right values combined with other properties in horizontal and vertical text.

Underlining a Chemical Formula

Let's underline the chemical formula of Theobromine without affecting the rest of the sentence.

<p>Theobromine - a key alkaloid found in cacao: <span class="formula">C<sub>7</sub>H<sub>8</sub>N<sub>4</sub>O<sub>2</sub></span>.</p>
/* Underline only the chemical formula and position it below the text */
.formula {
  text-decoration: underline;
  text-underline-position: under;

Now, only the formula is underlined, while the text-underline-position: under; value ensures that the underline doesn't cut through the subscript numbers.

Horizontal and Vertical Text with Left or Right Values

Next, we'll apply the text-underline-position property to horizontal and vertical text paragraphs, adjusting the underline position accordingly.

<p class="horizontal-text">Discover how to build for the web with Web Reference!</p>

<p class="vertical-text">Discover how to build for the web with Web Reference!</p>
/* Common styles for both paragraphs */
p {
  font-size: 1.8rem;
  color: #CD3333;
  text-decoration: underline #FBBF24; 

/* Position the underline below the text for the horizontal paragraph */
.horizontal-text {
  text-underline-position: under;

/* Use a vertical writing mode and position the underline on the left for the vertical paragraph */
.vertical-text {
  writing-mode: vertical-rl;
  text-underline-position: left;

Here, the horizontal paragraph has an underline positioned below the text, while the vertical paragraph has a left-side underline thanks to the writing-mode: vertical-rl; and text-underline-position: left; properties.


The text-underline-position property can accept the following values:

autoThe browser determines the underline position based on font metrics (default value).
underThe underline is positioned below the text, without cutting any characters.
leftSets the position of the underline on the left side of vertically written text.
rightSets the position of the underline on the right side of vertically written text.
from-fontUses the position information from the font file if available, otherwise behaves as if set to auto.

Non-standard and Experimental Values

The following non-standard and experimental values are also available:

auto-posIdentical to auto, but auto is recommended for use.
abovePositions the line above the text. With East-Asian text, the auto keyword creates a comparable effect.
belowPositions the line below the text. With alphabetic text, the auto keyword creates a comparable effect.

Associated Properties

  • text-decoration
  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • writing-mode

Tips and Tricks

  • For subscript text, setting text-underline-position to under can help avoid the underline cutting through the subscripts, improving readability.

  • Be aware that the text-underline-position property is not reset by the text-decoration shorthand property, so you might need to set it explicitly.

  • Remember that non-standard and experimental values, such as above and below, might not be supported consistently across browsers, so use them with caution.

  • When working with vertical text, you can use the left and right values to position the underline on the desired side of the text.

  • Consider setting a global value for text-underline-position using the :root selector, particularly when working with documents containing numerous subscripts in chemical or mathematical formulas. For instance, :root { text-underline-position: under; } can be an appropriate choice for such documents."

Browser Compatibility

Older versions of Safari (9-12), require vendor prefixes for proper functioning. More specifics can be found in the useful resources section below.

BrowserChromeEdgeSafariFirefoxOperaInternet Explorer

Caution: Internet Explorer support data may be incorrect since MDN browser-compat-data no longer updates it. Also, early Edge versions used EdgeHTML, leading to mismatched version numbers. From version 79, Edge uses Chromium with matching version numbers.

Useful Resources

Can I use: text-underline-position

CSS Text Decoration Module Level 3: text-underline-position

CSS Text Decoration Module Level 4: text-underline-position