[Resolved] Link Style

[Jeff]

On our current site the links are set to have a different color than the content. Is it possible to have the style of the links include an underline?

[Tom]

Sure, you can do this:

.entry-content a {
    text-decoration: underline;
}

[Jeff]

Great! Thank you, that works! Is it possible to change the color of the now underlined links so that only the underlined hyperlinks change color? In other words, keep the hyperlinked text styled as black (#00000) but have the underline itself be a different color (I am going for green #0a9e01) Thanks!

[Tom]

In that case, you would have to do something like this:

.entry-content a {
    border-bottom: 1px solid #0a9e01;
}

[Cathy]

I am trying to underline my text links too, using the code above. I’m trying to insert it before or after this coding, but it’s not working:

a href=”https://appealmktg.com/about/”>list of industry experience.

Could the underline option be in the link customization, where you can change the colors?

Thanks!

[Tom]

You need to add CSS one of the methods here: https://docs.generatepress.com/article/adding-css/

[Cathy]

Okay, thanks! I will try that.

[Tom]

No problem 🙂

[Jeff]

This worked great but we have to exclude the underlining for some of the other page elements. for example… e have a social share icon on the page and it added the underline to that graphic/image. How can I exclude the underline to only be in the page or post content.

[Leo]

Hi there,

Tom’s code above should only apply to content.

Can you link me to the page and point out the specific element you would like to exclude?

Should be able to come up with an alternative solution.

Let me know 🙂

[Jeff]

Hi Leo,

Sure, one example is on posts here: https://fintechfreedom.com/estate-planning/ if you scroll to the bottom after the content you will see a green line under the social media icons. Another place/example is on the home page: https://fintechfreedom.com/ in the latest articles section the same green line under the photo(s), author, title and read more button(s). Thanks!

[Leo]

Try this AFTER Tom’s CSS. It should overwrite it:

.addtoany_share_save_container.addtoany_content_bottom a {
    border-bottom: none;
}

[Jeff]

Thanks, Leo, This code was successful in eliminating the issue on the social media links.

Can you provide a way to exclude it from the Post Title & Author links as seen on the bottom of this: https://fintechfreedom.com/ Thanks!

[Tom]

Try this:

.fl-post-feed-header a {
    border-bottom: 0;
}

[Jeff]

Thanks, Tom! Worked great!

[Author]

Posts