Change Colour of Text Underline

Looking to set the underline colour of text to be a different colour to the text.

The default colouring will set the underline colour to be the same as the text, as illustrated below:

Example text with an underlined word.

We can use CSS for setting the colour using the parameter will be

text-decoration-color: #dd0000;

This may be included, targeting underlines in general, or by use of classes/ids.

Here’s the same underline, with the text-decoration-color set. In this example I’ve used the in-line style – its easier to use for ad-hoc styling examples.

Example text with an <u style=”text-decoration-color: #dd0000;”>underlined</u> word

Example text with an underlined word

WordPress

Whilst writing this article I noticed that the ready formatting options offered in the WordPress text editor don’t include an underline. Is this for simplicity, rationalising the options available in a limited space, maybe because the underline can so easily be confused with a link, or perhaps use of the tag is no longer encouraged.

I found that version 4.7 of WordPress, from late 2016, removed both the underline and justify options from the TinyMCE editor.