CSS text-underline-position Property

Set the position of underline text decorations:

div.a {
text-decoration: underline;
text-underline-position: auto;
}

div.b {
text-decoration: underline;
text-underline-position: under;
}

Definition and Usage

The text-underline-position property specifies the position of underline text decorations.

Default value:	auto
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.textUnderlinePosition="under" Try it

The numbers in the table specify the first browser version that fully supports the property.

Property
text-underline-position	33.0	79.0	74.0	12.1	20.0

Value	Description	Play it
auto	Default value. The browser sets the position of the underline	Demo ❯
under	Sets the underline below the alphabetic baseline	Demo ❯
from-font	If the font file includes information about underline position, use that value. If not, use auto
left	In vertical writing mode the underline will be placed to the left of the text. In horizontal writing mode the underline will be placed as auto
right	In vertical writing mode the underline will be placed to the right of the text. In horizontal writing mode the underline will be placed as auto
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit