The text-underline-offset
CSS property sets the offset distance of an underline text decoration line (applied using text-decoration
) from its original position.
text-underline-offset
is not part of the text-decoration
shorthand. While an element can have multiple text-decoration
lines, text-underline-offset
only impacts underlining, and not other possible line decoration options such as overline
or line-through.
Syntax
/* Single keyword */ text-underline-offset: auto; text-underline-offset: from-font; /* length */ text-underline-offset: 0.1em; text-underline-offset: 3px; /* Global values */ text-underline-offset: inherit; text-underline-offset: initial; text-underline-offset: unset;
The text-underline-offset
property is specified as a single value from the list below.
Values
auto
- The browser chooses the appropriate offset for underlines.
from-font
- If the font file includes information about a preferred offset, use that value. If the font file doesn't include this information, behave as if
auto
was set, with the browser choosing an appropriate offset. <length>
- Specifies the offset of underlines as a
<length>
, overriding the font file suggestion and the browser default. It is recommended to useem
units so the offset scales with the font size.
Formal syntax
auto | from-font | <length>
Examples
<p class="oneline">Here's some text with an offset wavy red underline!</p> <br> <p class="twolines">This text has lines both above and below it. Only the bottom one is offset.</p>
p { text-decoration: underline wavy red; text-underline-offset: 1em; } .twolines { text-decoration-color: purple; text-decoration-line: underline overline; }
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 4 The definition of 'text-underline-offset' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
text-underline-offset | Chrome No support No | Edge No support No | Firefox
Full support
70
| IE No support No | Opera No support No | Safari Full support 12.1 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 12.2 | Samsung Internet Android No support No |
Legend
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- User must explicitly enable this feature.
- User must explicitly enable this feature.