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

Enjoy.