text-underline-position

This property is used to specify the position of decorative lines that are drawn under text; using the text-decoration property.

Initial Value auto
Applies to All elements
Inheritance yes
Animation discrete

The text-underline-position property specifies the position of the decoration line that will be drawn under the text. Specifically, it adjusts the position where the text-decoration underline appears.

The effect obtained with this property is negligible. It does not allow the user to freely move the position of the underline with any offset value, but rather to select from a predefined position.

However, in vertical writing mode, you can choose the position of the underline from the left or right.

As such, text-underline-position can be an important feature to improve readability, depending on the language and reading direction.

Syntax

/* Keyword values */

text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;

/* Mutiple values */

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: unset;

Example

text-underline-position: auto;

E X A M P L E ONE

text-underline-position: under;

E X A M P L E TWO

 

And to apply the underline position in Vertical writing mode, you need to specify the second position value.

text-underline-position: auto;

I’m vertically aligned text.

text-underline-position: under right;

I’m vertically aligned text.

p {
	writing-mode: vertical-rl;
}

p {
	text-decoration: underline;
}

.auto p {
	text-underline-position: auto;
}

.under-right p {
	text-underline-position: under right;
}