CSS text-underline-offset Property
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.
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 |
Related Pages
CSS tutorial: CSS Text Decoration
HTML DOM reference: textDecoration property