How to Add underline color

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/rRu19b8p

Kindly 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/:not

Hope 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. :)