CSS text-underline-offset property

Definition and usage

text-underline-offset The attribute specifies the offset distance for underlined text decoration.

Example

Set the offset distance for underlined text decoration:

div.a {
  text-decoration: underline;
}
div.b {
  text-decoration: underline;
  text-underline-offset: 10px;
}
div.c {
  text-decoration: underline wavy blue;
}
div.d {
  text-decoration: underline wavy blue;
  text-underline-offset: 10px;
}

Try it yourself

CSS syntax

text-underline-offset: auto|length|percentage|initial|inherit;

Attribute value

Value Description
auto Default value. The browser sets an appropriate offset for the underline.
length Specifies the offset as a length value.
percentage Specifies the offset as a percentage value.
initial Sets this property to its default value. See also initial.
inherit Inherits this property from its parent element. See also inherit.

Technical details

Default value: auto
Inheritance: yes
Animation creation: Not supported. See also:Animation-related properties.
Version: CSS4
JavaScript syntax: object.style.textUnderlineOffset="1em"

Browser support

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

Chrome Edge Firefox Safari Opera
87.0 87.0 70.0 12.1 73.0

Related pages

Tutorial:CSS text decoration

Reference:HTML DOM textDecoration property