Archived topic
Underline all p links, but not in one specifik container
5 replies · Started by blackbird on October 26, 2021
Hi, I think I have read you are working on a change when it comes to underlining links. Right?
In the meantime I have added a custom CSS code to underline all links in paragraphs. And to not underline on hover.
/* Links */
.entry-content p a {
text-decoration: underline;
}
.entry-content p a:hover {
text-decoration: none;
}
But now I have made a container with some paragraph-links that I do NOT want to be underline at all. How can I exclude only them? I have tried to add a CSS class specifik to them, but my other custom CSS overrules my attempts...
I initially wanted them to be buttons, but as far as I can see buttons can only be centered (?), and I want these to be left aligned like a list. Maybe it is easier to make them as buttons again and add some CSS to left align them, than to add CSS to NOT underline only these p-links??
Hi there,
You should add Additional CSS Class(es) to the paragraph blocks you want links to be underlined.
Example: add underlined-links class to the paragraph block (or any block) and then add this CSS:
/* Links */
.entry-content .underlined-links a {
text-decoration: underline;
}
.entry-content .underlined-links a:hover {
text-decoration: none;
}With this CSS, links within blocks with underlined-links are the only ones will have the styling. :D
Hmm.. I have to think about that, we have a big complex site, so it will be a lot of places to add that CSS-class (and try not to forget to do it in new blog-posts in the future, etc).
It would be easier if I could just "undo" underline for this particular container/these few links...
Hmm.. I have to think about that, we have a big complex site, so it will be a lot of places to add that CSS-class (and try not to forget to do it in new blog-posts in the future, etc).
It would be easier if I could just “undo” underline for this particular container/these few links…
The inverse alternative is to add no-underline-links to the blocks you want no underline on links.
Example:
/* Links */
.entry-content *:not(.no-underline-links) a {
text-decoration: underline;
}
.entry-content *:not(.no-underline-links) a:hover {
text-decoration: none;
}Or try to determine if any paragraph blocks have a specific thing they have in common. Perhaps that something in common comes from a class w/c you can use as a selector for inclusion/exclusion. :D
Thank you for that code! I did try something similar but did not know the right way. If I change your "undeline" in the first part to "none", and add p (probably since I use p in my other custom code), then it works like a charm!! :-)
/* Links */
.entry-content *:not(.no-underline-links) p a {
text-decoration: none;
}
.entry-content *:not(.no-underline-links) p a:hover {
text-decoration: none;
}
Glad you got it sorted. :D
