How to Change Link Underline Color in WordPress Using CSS

The user interface of the WordPress’ default Site Editor doesn’t have an option for changing the link underline color, so it can be different from the link font color. Luckily, with a bit of CSS code added to the Additional CSS section of the Site Editor interface, you can easily change the underline color of your links separately.

Here’s how to do that using the text-decoration-color: yourcolor CSS code.

Go to Site Editor > Styles > Additional CSS.

In the Additional CSS section add the following line to make the links on your WordPress site underlined with your desired line color. For this example we will use the blue underline color.

a {text-decoration-color: blue}

Now, your links will be underlined with a blue line, regardless of the color of the actual font you use. Of course, the blue line will show up only under links which do have text underline enabled.

Keep in mind that the a {text-decoration-color: blue} line only changes the underline color of links in the default state and not in other states like hover, active, or visited. To change these colors as well, use the a:hover, a:active, and a:visited link states in CSS, like this:

a:hover {text-decoration-color: blue}
a:active {text-decoration-color: blue}
a:visited {text-decoration-color: blue}

In some cases, you may want to change the underline color of links only in a specific element of the website. For example, to make the change only in the actual content of blog posts, use this line:

.entry-content a {text-decoration-color: blue}

Have a comment, question or suggestion about this post? You can use the comment section below.

If you want me to implement this code on your site, feel free to contact me.