Making a link's underline a different colour from the text

By default links are underlined. The underlining is in the same colour as the link. This week I learnt that you can have the underlining in a different colour to the link!

I've used the text-decoration property a lot, to take away the underline. But it never occurred to me that there was more to it than just the none.

This is all it takes to change the colour of the underline:

text-decoration-color: red;

(Screenshot from MDN's example)

So simple and yet if you don't know it exists, you don't know you can do it.

You can also change the style of the underline and the thickness. See the MDN article on text-decoration for more details .