Hello – can you provide CSS to add a coloured underline, dotted or solid, to hyperlinks in posts and pages content only?
Also to keep text the default black, not blue?
I have tried these from https://www.thoughtco.com/change-link-underlines-3466397:
Change the underline to dots with the border-bottom style property a { text-decoration: none; border-bottom:1px dotted; }.
Change the underline color by typing a { text-decoration: none; border-bottom:1px solid red; }. Replace solid red with another color.
But both add underlines to all hyperlinks (including menus, widgets etc) on the theme.
Many thanks
Mark Gilbert
Hello Mark!
Every element from your page has a class that you should add it for the CSS code. For example, for the post content and blockquote links you can write the CSS like this:
.td-post-content a, .td-post-content blockquote a {
text-decoration: underline;
text-decoration-color: red;
}
Hope that helps you!
Thank you!
That’s great – thanks.
But how can I get the text to remain default colour (in this case black) and have a dotted red line?
Hello Mark!
Try this code:
.td-post-content a, .td-post-content blockquote a {
text-decoration: underline dotted;
text-decoration-color: red;
color: black!important;}
Thank you!
Many thanks, but this is giving a red solid line, and only when you hover over the link. Otherwise the link is unmarked. I need the line to be red, dotted and permanent.
Hello Mark!
Please correct the code:
.td-post-content a, .td-post-content blockquote a {
text-decoration: underline dotted!important;
text-decoration-color: red !important;
color: black!important;}
Let me know the results!
Thank you!
Hi Bettina
That gives the same result as your Aug 30 code above – a red solid line, and only when you hover over the link.
Thanks
Hello Mark!
Please provide a link where you applied this code, so I can investigate why it is not working for you.
Thank you!
Difficult, because if I apply it all my links become invisible while I wait for your investigation. Or give me a 30-minute slot when I should do it and you can look? So that the links aren’t invisible for too long?
Thanks
Hello Mark!
You can send me all the necessary details(links and code) via email at contact@tagdiv.com and provide the following:
– admin url and credentials
– a link to this topic in order to identify you
We will take a look and try to help you!
Thank you!
Hi Bettina,
Thank you for directing me here, this is exactly what I was looking for.
I tried the CSS code, but it changes all links, including the sidebar, author and tags.
Can I make this CSS command apply only to the body text?
thank you,
Icus
Hello Icus!
Try this code:
.td-post-content a {
text-decoration: underline dotted!important;
text-decoration-color: red !important;
color: black!important;}
Thank you!
Hi Bettina. Thank you very much, it works perfectly.
Hi Bettina – catching up here – please remind me where this code goes?
Many thanks
Mark Gilbert
Ok – added it at Custom CSS, but as before (Sept 22) the URLs become completely unmarked. There is no permanent red underline. It only appears on hovering over the link. So no-one knows there’s a link until then. Maybe it’s just a problem with my site. I’ll send details to contact@tagdiv.com. Thanks.
Hello Mark!
If you sent an email, then we will take a look and try to help you as soon as possible.
Let’s continue the discussion there.
Thank you for understanding!
