text-decoration-inset | CSS CSS Properties

An experimental property that allows you to adjust the position of an underline or overline, pushing it closer to or further away from the text baseline.

Quick example

span {
  text-decoration: underline;
  /* Pushes the underline 2px further down from the text */
  text-decoration-inset: 2px;
}

Quick facts

Initial value

0

Inherited

Applies to

all elements

Animation type

byComputedValue

Values

auto

text-decoration-inset Browser Support

Limited availability 2% global usage

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Not ready for production without a fallback.

View on caniuse.com → View on MDN → View on webstatus.dev → Learn more about Baseline →

146+