CSS text-underline-offset Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the offset distance of underline text decorations:

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 »

Definition and Usage

The text-underline-offset property specifies the offset distance of underline text decorations.

Show demo ❯

Default value:	auto
Inherited:	yes
Animatable:	no. Read about animatable
Version:	CSS4
JavaScript syntax:	object.style.textUnderlineOffset="1em" Try it

Browser Support

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

Property
text-underline-offset	87.0	87.0	70.0	12.1	73.0

CSS Syntax

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

Property Values

Value	Description	Play it
auto	Default value. The browser sets the appropriate offset for the underline	Demo ❯
length	Specifies the offset as a length value	Demo ❯
percentage	Specifies the offset as a percentage value	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

CSS tutorial: CSS Text Decoration

HTML DOM reference: textDecoration property