text-underline-offset
Allows you to precisely control the distance between an underline and the text baseline. This is perfect for ensuring underlines don't cut through the tails of letters or are just positioned exactly where you want them.
Quick example
a.fancy-link {
text-decoration: underline;
/* Pushes the underline 4px below the text baseline */
text-underline-offset: 4px;
}Quick facts
Initial value
autoInherited
Yes
Applies to
all elements
Animation type
byComputedValueType
Values
auto text-underline-offset Browser Support
Widely available Since 2020 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
87+
70+
12.1+
87+