CSS text-underline-offset Property


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
Applies to
all elements. It also applies to ::first-letter and ::first-line.
Computed value
as specified
by computed value type
JavaScript syntax

Interactive Demo

The rusty swing set creaked.


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


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


<p class="oneline">Here's some text with an offset wavy red underline!</p>
<p class="twolines">
This text has lines both above and below it. Only the bottom one is offset.
p {
  text-decoration: underline wavy red;
  text-underline-offset: 1em;

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

Browser Support

The following table will show you the current browser support for the CSS text-underline-offset property.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 2nd January 2024