CSS text-underline-position Property – Specifies the Positional Basis of Underlines

Definition and Usage

The text-underline-position property specifies the position used as the basis for underlines set by the text-decoration.

This property is useful for improving readability, as it allows you to explicitly set where in the text the underline will be drawn.

Basic Example

Formal syntax

Values

Accepted values for the text-underline-position property
`auto`	The browser chooses the underline position based on its default behavior, typically aligned with or slightly below the alphabetic baseline.
`from-font`	Uses the preferred underline position specified by the font, if available. If not defined in the font, it falls back to the browser default.
`under`	Positions the underline at the lower edge of the text content—specifically, below the bottom edge of letters that extend beneath the baseline, such as `g`, `j`, `p`, `q`, and `j`.
`left`	In vertical writing modes, the underline is positioned on the left side of the text, using the same baseline offset as `under`. In horizontal writing modes, it behaves the same as `auto`
`right`	In vertical writing modes, the underline is positioned on the right side of the text, using the same baseline offset as `under`. In horizontal writing modes, it behaves the same as `auto`.

Tip:
The text-underline-position property sets the base position of the underline.
If you want to shift the underline higher or lower from that position, use the text-underline-offset property.

Syntax

CSS

/* Single keyword values */
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Two keyword values */
text-underline-position: from-font left;
text-underline-position: under left;
text-underline-position: right under;

/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;

Formal definition

Formal definition of the text-underline-position property
Initial value	`auto`
Applies to	all elements
Inherited	yes
Percentages	n/a
Computed value	specified keyword(s)
Animatable	no

Practical Examples

ere are some practical examples demonstrating how the text-underline-position property works when applied to text. The examples below show both single-keyword and dual-keyword values in use.

Using a Single Keyword Value

The under value places the underline below the text content. This is particularly helpful for improving the readability of formulas in chemistry or math, where subscripts are often used. The following comparison illustrates the difference between the default auto value and the under value.

HTML

<div class="example-box">
    <div class="label">text-underline-position: auto;</div>
    <p class="auto-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>

<div class="example-box">
<div class="label">text-underline-position: under;</div>
    <p class="under-underline">
        Velocity: v<sub>avg</sub> = d / t
    </p>
</div>

CSS

.example-box {
    font-size: 28px;
    border: 1px solid;
    padding: 1em 1em 0;
}
.example-box + .example-box {
    margin-top: 0.5em;
}
.auto-underline {
    text-decoration: underline;
    text-underline-position: auto;
}
.under-underline {
    text-decoration: underline;
    text-underline-position: under;
}
.label {
    font-size: 16px;
    color: #555;
    margin-bottom: 4px;
}

Using Two Keyword Values

text-underline-position also supports a combination of two keywords. When doing so, be aware of the following rules. Let's review the formal syntax again.

When using a combination of two keyword values with the text-underline-position property, the following rules apply:

The value auto cannot be included when specifying two keywords.
One of the two keywords must be either from-font or under.
The other keyword must be either left or right.
You can list the two keywords separated by a space, and their order does not matter.

These two-keyword combinations behave as follows:

from-font and under
left and right: Apply only in vertical writing modes.

Here's an example that demonstrates these behaviors: