Different Colors For Links

Hi Jodie,

For reference, can you give a couple of examples of "important" links you wish to alter the color of?

The best way I'm thinking right now is through custom CSS targeting a specific custom class.

Hi Fernando
Thank you.
Sure thing. I've attached some examples.

I see. If that's the case, can you try using the Highlight feature of WordPress? Example: https://share.getcloudapp.com/p9uLzqRj

Thanks so much Fernando

I've had a go at using that feature but the underline color of green and hover color of purple are the same as our current link styles.
Is there any way to change the underline color and hover color of the underline for the links we choose to be another color?
I've attached a screenshot
As always I appreciate your help.

I see. There's a way.

We can you the "highlight" feature as a determinant of "important" links.

Then, you can add this CSS through Appearance > Customize > Additional CSS:

.entry-content p a:not(:empty) {
    color: #ff0000;
}

.entry-content p a:not(:empty):hover mark {
    color: #ff00ff !important;
}

You can alter the color values to your preference.

Thanks very much Fernando

Is there a way to do this using a CSS Class? I am just thinking that sometimes I use the highlight feature to change links to white text as it is hard to see the green text on a purple background.
Would using the above CSS change all the links that I already have highlighted on the site?

Hi there,

if you want to style a specific link in your content using an additonal CSS class then:

1. Add this CSS:

.entry-content .my-custom-link a {
    color: #ff0000 !important;
}
.entry-content .my-custom-link a:hover {
    color: #00ffff !important;
}

2. Select the block in the editor and give it an Advanced > Addtional CSS Class of my-custom-link

Change the my-custom-link class to whatever you require.

Thanks so much David.

I will try what you've recommended above.

Cheers Jodie

You're welcome