text-underline-position
Defines where an underline should be placed. While 'offset' moves it by a specific amount, 'position' lets you choose logical spots like 'under' the descenders (the tails of letters) or on the sides for vertical text.
It is documented as part of the CSS Text Decoration specification.
Syntax
/* Usage Example */
p {
text-decoration: underline;
/* Ensures the underline is placed below all character descenders for maximum clarity */
text-underline-position: under;
}
/* Syntax */
text-underline-position: auto;
text-underline-position: from-font;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
/* Global values */
text-underline-position: inherit;
text-underline-position: initial;
text-underline-position: revert;
text-underline-position: revert-layer;
text-underline-position: unset;text-underline-position 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.
33+
74+
12.1+
12+