text-underline-offset

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 use em 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

Browser compatibility

See also

• text-decoration
• text-decoration-thickness