Links make the web work. They also have some of the strictest limits for styling in CSS due to security concerns. Designers and typographers have long complained that the default presentation of links can affect text legibility, reducing user interaction. The good news is that the CSS specification now directly addresses these issues, improving the look of links and their usability.

text–decoration–skip

By default, text links on web pages appear blue and underlined. On most browsers the underlining strikes through descenders - letters that dip below the baseline, such as a lowercase j – making links that contain those letters more difficult to read. Historically there have been many answers to this problem, but the CSS specification now has its own direct solution: text–decoration–skip. The property has many possible values, but its intention is always the same: to determine where an underline will not be drawn for a link.

The value of this property of primary interest to most designers and developers is ink, which addresses the problem mentioned above. Using this value for text–decoration–skip will cause link underlinking to skip descenders, producing the effect you see at the top of this article.

a { text–decoration–skip: ink; }

The property is supported in Chrome 57+ and Safari 8+ (using a webkit prefix, as well as Opera 44 and higher. In Safari 10+ and Chrome 64+, text–decoration–skip: ink is on by default for all links, built into the browser's default styles.

text–decoration–color

Traditionally, a link’s underline color inherits the color associated with the a element. In the example below:

a { color: green; }

…the text and the underline color of any link will be green; the two are inseparable.

There are also many ways around this, most notably by turning off text-decoration for links by setting the property to none and substituting that effect with border-bottom, which can be set to any color. But CSS now allows the designer direct control over the color of the underline effect with text–decoration–color:

a { text–decoration–color: #ccc; }

Support for text–decoration–color is broader than text–decoration–skip: .text–decoration–color appears in Chrome 57+, Firefox 36+, Opera 44+, and Safari (with a -webkit prefix). Only Microsoft Edge currently lacks support.

Conclusion

While they don’t yet have complete browser support, both text–decoration–color and text–decoration–skip are very useful, and should be considered for your site stylesheet. I expect text–decoration–skip: ink to become the default for most browsers in the coming years, but including it in your CSS now means you also reach browsers that supported the property before ink became the default behaviour.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.