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
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
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.