- This topic has 9 replies, 2 voices, and was last updated 3 years, 5 months ago by
.
-
Posts
-
Hi
I am trying to add underline color for both external and internal links in my content (eg shared privately )
I found this code on generatepress support forum but it’s highlighting buttons and image links. I want only the content area links to be underlined like an eg I shared privately.
Thanks
Here is the code i used before
/** Link color change **/
.entry-content a {
position: relative;
z-index: 1;
}.entry-content a:after {
content: ”;
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 10px;
background-color: #ffb001;
z-index: -1;
}
.entry-content a {
box-shadow: inset 0 -0.5em #ffb001;
transition: box-shadow 0.2s ease-in;
}
.entry-content a:hover {
box-shadow: inset 0 -1em #ffb001;
}Customer Support
Hi Sandeep,
I can see multiple links in your content. When you say you “want only the content area”, to confirm, which ones of these examples are you wanting to implement the underline:
1. https://share.getcloudapp.com/z8uLxryL
2. https://share.getcloudapp.com/mXuYBK0z
3. https://share.getcloudapp.com/lluEDoPp
4. https://share.getcloudapp.com/rRu19b8pKindly indicate which ones for example.
Hope to hear from you soon. 🙂
All the Above
Except “Buttons” and “Outline” area (table of Contents)
To confirm, is this website using the GeneratePress theme? It seems that it’s using a different theme.
Moreover, it also seems like the underline is coming from Elementor. It would be best to check settings from Elementor with regards to this.
Please be mindful with what our support includes: https://generatepress.com/what-support-includes/
Hope this clarifies. 🙂
Fernando
I gave this link just for eg. This is not my site. I’m using Generatepress pro on my site and I asked how to achieve this in GP via CSS. and I already got 80% success with the code above.
Hope this clarifies. 🙂
I see. Thank you for clarifying.
To provide an appropriate code, it would be best if we could have the link to a sample page from your website.
You may use the private information field if your prefer: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information
Hope to hear from you soon. 🙂
Shared
Thank you for including the link.
One easy CSS to add an underline that won’t add an underline to the Table of content links and buttons is:
.entry-content a { text-decoration:underline; text-decoration-color: #000; }Otherwise, if you want to go with the CSS provided earlier, you may alter that to this:
/** Link color change **/ .entry-content a:not(.gb-button) { position: relative; z-index: 1; } .entry-content a:not(.gb-button):after { content: ”; position: absolute; left: 0; right: 0; bottom: -2px; height: 10px; background-color: #000; z-index: -1; } .entry-content a:not(.gb-button) { box-shadow: inset 0 -0.5em #000; transition: box-shadow 0.2s ease-in; } .entry-content a:not(.gb-button):hover { box-shadow: inset 0 -1em #000; }Kindly modify the other values to your preference.
Reference to
:not(): https://developer.mozilla.org/en-US/docs/Web/CSS/:notHope this helps! Kindly let us know how it goes. 🙂
Thanks
Working Fine
You’re welcome Sandeep! Glad to be of assistance! Feel free to reach out anytime if assistance with anything else is needed. 🙂
- You must be logged in to reply to this topic.
