Nicer CSS underlines with text-decoration-skip-ink: auto; (previously 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

Did this help you out? Like what you see?
Consider donating.

I don’t run ads on my blog nor do I do this for profit. A donation however would always put a smile on my face though. Thanks!

☕️ Buy me a Coffee ($3)

UPDATE 2018.01.09: The use of text-decoration-skip: ink; has been deprecated. One should use text-decoration-skip-ink: auto; instead. I’ve updated this post accordingly.

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Unless noted otherwise, the contents of this post are licensed under the Creative Commons Attribution 4.0 License and code samples are licensed under the MIT License

Join the Conversation

1 Comment

Leave a comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.