CodeHQ

Archive for August, 2017

|

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

Wednesday, August 16th, 2017

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.

Tags: , , , , , ,
Posted in CSS | No Comments »