CSS text-underline-offset Property

Description

The text-underline-offset CSS property is used to control the vertical positioning of underlines in text elements. By specifying a value for this property, you can adjust the distance between the baseline of the text and the underline, allowing for fine-tuned customization of the text's underlined appearance. This property is particularly useful when you want to align underlines with different font sizes or create unique text styling effects, ensuring that underlines appear precisely where you intend them to within your web page design.

Initial value: auto
Applies to: all elements. It also applies to ::first-letter and ::first-line.
Inherited: yes
Computed value: as specified
Animatable: by computed value type
JavaScript syntax: object.style.textUnderlineOffset

Interactive Demo

text-underline-offset: auto;

text-underline-offset: 10px;

text-underline-offset: 1.4rem;

The rusty swing set creaked.

Syntax

text-underline-offset: auto | <length> | <percentage>

Values

autoThe browser chooses the appropriate offset for underlines.
<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.
<percentage>Specifies the offset of underlines as a <percentage> of 1 em in the element's font. A percentage inherits as a relative value, and so therefore scales with changes in the font. For a given application of this property, the offset is constant across the whole box that the underline is applied to, even if there are child elements with different font sizes or vertical alignment.

Example

HTML

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

CSS

p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;
}

.twolines {
  text-decoration-color: purple;
  text-decoration-line: underline overline;
}

Result

Editor