Nicer CSS underlines with text-decoration-skip: ink;

When applying text-decoration: underline; on an element, the line drawn will cross descenders.

Using text-decoration-skip one can control the behavior of the underline

The text-decoration-skip CSS property specifies what parts of the element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

When set to ink, the underline will skip over descenders:

The text decoration is only drawn where it does not touch or closely approach a glyph. I.e. it is interrupted where it would otherwise cross over a glyph.

MDN text-decoration-skip

Elsewhere , ,

One Response to Nicer CSS underlines with text-decoration-skip: ink;

  1. Simp’s says:

    Safari seems to default to “skip”.
    And can apparently only be nudged from skip to none: http://caniuse.com/#search=skip

Leave a Reply

Your email address will not be published. Required fields are marked *