Definition and Usage

The text-underline-offset property specifies the spacing (offset) between the underline set by text-decoration and its original position.

By using this property, you can increase or decrease the spacing from the underline's positional basis.

Basic Example

CSS Live Demo: text-underline-offset Click the demo button below!

Formal syntax

CSS 
selector {
    text-underline-offset: 	auto | <length-percentage>
}

Values

Accepted values for the text-underline-offset property
auto The browser selects a suitable distance from the underline's original position based on its default behavior.
length Specifies the distance from the underline’s original position using a fixed length value (e.g., 2px, 0.1em).
<percentage> Specifies the distance as a percentage of the element's font size (1em).

If a length or <percentage> value is positive, the underline is offset outward from its original position. If the value is negative, the underline moves inward.

The Underline's Positional Basis

The text-underline-offset property specifies the spacing from the underline's original position, as determined by the text-underline-position property.

A value of 0 means the underline will appear at its original position (i.e., no offset applied). The position of the underline itself is set by text-underline-position, which establishes the positional basis for any offset.

Below is a table showing the possible values for text-underline-position:

Values accepted by the text-underline-position property
auto The browser chooses the underline position based on its default behavior, typically aligned with or slightly below the alphabetic baseline.
from-font Uses the preferred underline position specified by the font, if available. If not defined in the font, it falls back to the browser default.
under Positions the underline at the lower edge of the text content—specifically, below the bottom edge of letters that extend beneath the baseline, such as g, j, p, q, and j.
left In vertical writing modes, the underline is positioned on the left side of the text, using the same baseline offset as under.
In horizontal writing modes, it behaves the same as auto
right In vertical writing modes, the underline is positioned on the right side of the text, using the same baseline offset as under.
In horizontal writing modes, it behaves the same as auto.

Syntax

CSS 
/* Single keyword values */
text-underline-offset: auto;

/* Length values */
text-underline-offset: 0.1em;
text-underline-offset: -3px;

/* Percentage values */
text-underline-offset: 20%;

/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;

Formal definition

Formal definition of the text-underline-offset property
Initial value auto
Applies to all elements
Inherited yes
Percentages n/a
Computed value as specified, with length, <percentage> values computed
Animation type by computed value

Practical Examples

CSS 
p {
    font-size: 1.3em;
    text-decoration: underline;
    text-underline-position: under;
    text-underline-offset: 0;
}
HTML 
<p>ABCDEF ghijklm 12345</p>
Rendered Output

Browser compatibility

Browser compatibility for the text-underline-offset property
Property and Value
Desktop Chrome
Chrome
DesktopDesktop Edge
Edge
Desktop Firefox
Firefox
Safari
Safari
text-underline-offset 87 87 70 12.1
percentage values 87 87 74 18.2

Specifications

Specification for the text-underline-offset property
Specification
text-underline-offset CSS Text Decoration Module Level 4
#underline-offset

References

See also