[Resolved] Underline on hover for body text in pages and posts

[Peter]

I’ve tried many CSS examples in various forum posts without any luck. I want all the links in the body text of my pages and posts to underline on hover, but not titles, buttons, images, etc.

Can you help?

Thanks.

[Leo]

Hi there,

It could be tricky to include that many conditions in CSS unfortunately.

Can you start with this and link me to the page/post if it doesn’t work?

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

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know 🙂

[Peter]

Hi Leo,

That didn’t work. It only underlined the titles on the Home page. Truthfully, it’s not that important that we need a complicated CSS script. Thanks anyway.

[Leo]

Another way to approach this is to add a custom class link-underline when you want the link to have an underline, then we can use this CSS to target them specifically:

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

[Peter]

I’ll give it a shot. One question: How do I add a custom class?

[Leo]

Hmm it depends. Are these stand-alone block/links or links within a paragraph block?

[Peter]

links within a paragraph block

[Ying]

Hi Peter,

this article explains how to add additional CSS class to blocks:
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

[Peter]

Thanks. I’ll check it out.

[Ying]

No Problem 🙂

[Author]

Posts