Make underlines more readable

text-underline-position

Use this property to force text-decoration underlines to be below the baseline of characters, so that the underline does not cross over letter descenders.

Property values

Use one of these keyword values:

under Adjust the position of underlines to be below the font's descenders, so that the line does not cross "g", "j", "p" and "q"
auto Keep the underline in its normal position, which crosses over those letters
left For vertical writing modes, forces the text decoration underline to be on the left side
right For vertical writing modes, forces the text decoration underline to be on the right side

Examples

text-underline-position: under;
text-underline-position
0

style > character > text-underline-positionMake underlines more readable

🔗 🔎