CSS text-underline-offset Property

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS text-underline-offset examples showing underlines farther from text
Definition

Definition and Usage

The text-underline-offset property sets how far an underline sits from its default position. Positive lengths usually push the line farther below the text; negative lengths pull it closer.

It is not part of the text-decoration shorthand. It only affects underlines—not overline or line-through. You still need a line from text-decoration-line.

Standard-track.

Baseline widely available. Not deprecated, experimental, or non-standard.

Limited support.

Percentage values are newer in Safari (18.2+). Prefer em or px for the widest reach.

Syntax

CSS Syntax

syntax.css
text-underline-offset: auto | <length> | <percentage> | initial | inherit;

Prefer em so the gap scales with font size. Percentages refer to 1em of the element’s font.

Values

Property Values

ValueDescriptionTry it
autoBrowser chooses the offset (initial)Try it
8pxFixed length farther from the textTry it
0.25emOffset that scales with font sizeTry it
-2pxNegative length pulls the line closerTry it
initialResets to autoTry it
inheritTakes the parent’s offsetTry it
Approach

How to Use text-underline-offset

Draw an underline first, then nudge it. Offset alone never creates a line.

  1. Set text-decoration-line: underline (or the shorthand).
  2. Add text-underline-offset with auto, a length, or a percentage.
  3. Prefer em so the gap grows with the font.
  4. Tune style with text-decoration-thickness and text-underline-position when needed.
PieceRequired?Role
UnderlineYestext-decoration-line: underline
text-underline-offsetNoDefaults to auto
Unit choice—em scales; % support is uneven in older Safari
Try it

Live Preview

Same underlined sentence. Change only text-underline-offset.

The sample stays underlined. Only the gap between text and line changes.

Text

Sample underline offset

text-underline-offset: 8px

Code

CSS Examples

Each snippet focuses on text-underline-offset. Use Try It Yourself for a live editor.

Example 1 — Push the Underline Down

Underline the text, then add a fixed gap.

CSS
<style>
  p {
    text-decoration-line: underline;
    text-underline-offset: 8px;
  }
</style>

<p>Sample underline offset</p>
Try It Yourself

How It Works

  1. Draw the line. text-decoration-line: underline creates the decoration.
  2. Set the offset. 8px moves that underline farther from the glyphs.
  3. Shorthand-safe. Changing text-decoration later will not clear this offset.
  4. Why use it. Gives breathing room so descenders (g, y, p) do not collide with the line.

Example 2 — Scale the Gap with em

Keep the offset proportional to the font size.

CSS
<style>
  p {
    text-decoration-line: underline;
    text-underline-offset: 0.25em;
  }
</style>

<p>Sample underline offset</p>
Try It Yourself

How It Works

  1. Underline first. Offset needs a line to move.
  2. Use em. 0.25em is a quarter of the element’s font size.
  3. Scales cleanly. Larger headings get a larger gap automatically.
  4. MDN tip. Lengths in em are preferred over raw pixels for typography.

Example 3 — Let the Browser Choose

Use the initial auto offset from font metrics.

CSS
<style>
  p {
    text-decoration-line: underline;
    text-underline-offset: auto;
  }
</style>

<p>Sample underline offset</p>
Try It Yourself

How It Works

  1. Keep the underline. Without it, auto has nothing to place.
  2. Defer to the UA. auto uses browser and font defaults.
  3. Reset tip. initial also returns to auto.
  4. When to override. Switch to a length when the default feels too tight on your font.

Edge Cases & Pitfalls

If the underline gap looks wrong, one of these is usually why.

line

No underline means no visible offset

text-underline-offset only moves underlines. With none, overline, or line-through alone, you will not see a change.

scope

Only underlines are affected

If you set underline overline, only the bottom line moves. Overline and strike-through keep their default positions.

shorthand

Not reset by text-decoration

Offset is outside the shorthand. That is useful—your gap survives hover rules that only change the line—but easy to forget when debugging.

%

Percentages need newer Safari

Percentage offsets are supported in Chrome and Firefox earlier; Safari needs 18.2+. Prefer em when you must support older Safari.

position

Position is a different knob

Where the underline starts (under vs from-font) is text-underline-position. Offset then shifts from that starting point.

Compatibility

Browser Support

text-underline-offset is a browser CSS property for underline distance. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available since Nov 2020

text-underline-offset

Supported in Chrome 87+, Firefox 70+, Safari 12.1+, Edge 87+, Opera 73+, Samsung Internet 14+. Percentage values: Safari 18.2+. Not supported in Internet Explorer.

97% Global support
Google Chrome 87+
Full support
Mozilla Firefox 70+
Full support
Apple Safari 12.1+
Full support
Microsoft Edge 87+
Full support
Opera 73+
Full support
Samsung Internet 14+
Full support
Internet Explorer No
Not supported
text-underline-offset Widely supported

Bottom line: Safe for modern browsers with auto and length values. Use em instead of % when older Safari still matters.

Remember

Key Takeaways

  • Role: shifts underline distance without changing overline or strike-through.
  • Initial value: auto. The property is inherited.
  • Prerequisite: an underline must exist first.
  • Tip: prefer em; it is not part of the text-decoration shorthand.

One line: underline the text, then set text-underline-offset when the default gap feels too tight or too loose.

Frequently Asked Questions

It shifts an underline farther from or closer to the text. It only affects underlines, not overlines or line-through.
auto. The browser picks an offset from font metrics and its defaults.
Yes. Set text-decoration-line: underline (or text-decoration: underline). Offset alone does not draw a line.
No. It is a separate property, so a text-decoration shorthand will not reset your offset.
Yes. Negative lengths move the underline toward or through the glyphs. Use them carefully for readability.
Baseline widely available: Chrome 87+, Firefox 70+, Safari 12.1+, Edge 87+. Percentage values need newer Safari (18.2+). It is a browser CSS property, not a Node.js feature.

Next: text-underline-position

Learn under, from-font, and other underline position keywords.

text-underline-position tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS text-transform Property CSS text-underline-position Property