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.
It is documented as part of the CSS Text Decoration specification.
Syntax
/* Usage Example */
a.fancy-link {
text-decoration: underline;
/* Pushes the underline 4px below the text baseline */
text-underline-offset: 4px;
}
/* Syntax */
text-underline-offset: auto;
/* Global values */
text-underline-offset: inherit;
text-underline-offset: initial;
text-underline-offset: revert;
text-underline-offset: revert-layer;
text-underline-offset: unset;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.
87+
70+
12.1+
87+