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.
