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 text-underline-offset
Подработка: Перевод страницы
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 text-underline-offset
The numbers in the table specify the first browser version that fully supports the property.
| Property | |||||
|---|---|---|---|---|---|
| text-underline-offset | 87.0 | 70.0 | 12.1 | 73.0 |
CSS Syntax text-underline-offset
text-underline-offset: auto|length|percentage|initial|inherit;
Property Values text-underline-offset
| 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 text-underline-offset
CSS tutorial: CSS Text Decoration
HTML DOM reference: textDecoration property