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.
Quick example
p {
text-decoration: underline;
/* Ensures the underline is placed below all character descenders for maximum clarity */
text-underline-position: under;
}Quick facts
Initial value
autoInherited
Yes
Applies to
all elements
Animation type
discrete
Values
autofrom-fontunderleftright 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.
Safe to use without fallbacks.
33+
74+
12.1+
12+