Text-decoration-skip-ink | CSS | Control underlined text on descenders

Ever wondered how you can stop underlines going over the top of descenders i.e. a word with letters that hang down… such as… empathy?

Underlined, that word looks like this empathy

In Chrome and Firefox it’s now possible! With text-decoration-skip


.underline {
    text-decoration: underline;
    text-decoration-skip-ink: auto;

The same word empathy now looks like this empathy