CSS text-underline-position attribute

Definition and usage

text-underline-position The attribute specifies the position of the underline text decoration.

Set the position of the underline text decoration:

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

text-underline-position: auto|under|from-font|left|right|initial|inherit;

Value	Description
auto	Default value. The browser sets the underline position.
under	Sets the underline below the letter base.
from-font	If the font file contains information about the underline position, use this value. Otherwise, use auto.
left	In vertical writing mode, the underline will be placed on the left side of the text. In horizontal writing mode, the underline will be placed according to auto.
right	In vertical writing mode, the underline will be placed on the right side of the text. In horizontal writing mode, the underline will be placed according to auto.
initial	Sets this property to its default value. See initial.
inherit	Inherits this property from its parent element. See inherit.

Default value:	auto
Inheritance:	yes
Animation creation:	Not supported. See:Animation-related properties.
Version:	CSS3
JavaScript syntax:	object.style.textUnderlinePosition="under"

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

Chrome	Edge	Firefox	Safari	Opera
33.0	79.0	74.0	12.1	20.0