Use this code in Custom CSS plugin or in theme option if available. It will nullify theme’s link style in post content.
.entry-content a:not(.more-link) {
background: none;
color: inherit;
text-shadow: none;
}
Doing this will result in bad UX though because link should be easy to see as link and the underline text is sort of a web standard for link.
Hi paulwpxp, thanks for your reply. Unfortunately, the code you suggested didn’t work…
My goal was to make links a different colour and have the line appear only when the user hovers on the link. Which would solve the user experience problem you mentioned.
The code didn’t work at all or it didn’t change the color? If the code didn’t make any difference at all, it means the code is not injected after theme’s css, please make sure to use Custom CSS plugin which usually inject the Custom CSS after so the code will override.
Use this code instead, it has more weight on specificity so even if it’s loaded after it still apply
body .entry-content a:not(.more-link) {
background: none;
color: blue;
text-shadow: none;
}
body .entry-content a:not(.more-link):hover { text-decoration: underline; }
Change blue to your own color code, the link will be underlined when hover over.
The code you suggested only worked when I put ‘!important’ at the end of each line.
Then, to make the link appear underlined only when the user hovers over it, I tried applying the original CSS to .entry-content a:not(.more-link):hover. However, the whole link text ended up having the blue background instead of just a line underneath (I’m guessing it’s just a bug in the theme).
I finally managed to solve this problem by looking at one of the examples from this discussion thread:
.entry-content a:hover {
color: #2ab2f5;
background: linear-gradient(#fff 95%, #2ab2f5 5%)!important;
}
It now works just the way I wanted.
Thanks again for your help.
