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 |