- This topic has 5 replies, 2 voices, and was last updated 2 years, 5 months ago by Elvin.
-
AuthorPosts
-
October 26, 2021 at 1:05 am #1975491blackbird
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??
October 26, 2021 at 1:39 am #1975513ElvinStaffCustomer SupportHi 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. 😀October 26, 2021 at 1:52 am #1975526blackbirdHmm.. 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…October 26, 2021 at 2:01 am #1975533ElvinStaffCustomer SupportHmm.. 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. 😀
October 26, 2021 at 2:17 am #1975560blackbirdThank 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; }
October 26, 2021 at 9:02 pm #1977136ElvinStaffCustomer SupportGlad you got it sorted. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.