Using text-decoration-color and text-decoration-skip with underlined links

Currently, I am creating a new WordPress theme and I had to think about which colours to use. I eventually went with a palette based on Abstraction Blue by Georgia O’Keeffe. Part of any web design is the styling of links. One of the goals is to have a good level of accessibility. And it is generally recommended to have underlines, because that makes links easier to discover.

I decided to use standards and not any CSS tricks, like border or box-shadow, to style underlines. There are two CSS properties that you can use:

With text-decoration-color you can change the colour of the underline.

And text-decoration-skip defines how underlines are displayed if letters have descenders, for example with the letter “g”. You can define that the underline is cleared.

But these two properties haven’t gained a lot of traction yet. And there is an obvious reason. They are not supported in all browsers.

Below is an example of the CSS you can use to get a different coloured underline and clearing descenders. The -webkit prefix is required for the Safari browser.

a {
  color: #51628e;
  text-decoration: underline;
  -webkit-text-decoration-color: #afd0c9;
  text-decoration-color: #afd0c9;
  -webkit-text-decoration-skip: ink;
  text-decoration-skip: ink;
a:hover {
  -webkit-text-decoration-color: #51628e;
  text-decoration-color: #51628e;

See my text-decoration demo for the different combinations.

This folllows the progressive enhancement way. It accepts browser differences by providing fallbacks for browsers that do not support certain features. And this is already built into CSS. If a CSS property is unknown, a browser will simply ignore it. But future versions might start supporting it. So you get an automatic update without doing anything.

If browser differences are not acceptable, you can use box-shadow and text-shadow to create a more consistent look. But be aware that CSS text-shadow can kill performance.