[Resolved] Underline links on hover

[Gian]

Hi Tom,

I’m trying to customize a few things (GeneratePress Premium) and I was wondering if there is an option or CSS to underline links only on hover.

Thank you in advance!

[Leo]

Hi there,

Try this CSS:

.inside-article a:hover {
    text-decoration: underline;
}

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

[Gian]

It works, thank you!

What if I would like to underline only links inside content and exclude blog post titles (h1, h2 etc)?

[Leo]

Hmm this instead:

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

[Gian]

Excellent, thank you!

There’s only one last thing, I have buttons (https://docs.generatepress.com/article/adding-buttons/) and I would like also to exclude them, what should I do in this case?

[Leo]

Try this instead:

.entry-content a:not(.read-more):hover {
    text-decoration: underline;
}

[Gian]

This code works inside articles but not on the homepage, where I replaced the “Read More” link with buttons.

Any idea how to achieve the same also on the homepage?

Also, is it possible to change the “Read More” link to the top of the page?

[Leo]

Can you link me to the site?

[Gian]

Yes, sure it’s still “under construction” but you can see the changes.

 

[Leo]

Adjusted the code above.

[Gian]

The code above unfortunately works for “read more” buttons in homepage, but not for other buttons placed inside articles, pages etc

Any idea how to remove the underline on every button and keep on other links?

[Gian]

Probably solved with the CSS

.inside-article a:not(.button.ghost):hover {
    text-decoration: underline;
}

What do you think?

Thank you

[Gian]

No, it remove underline on normal links 🙁

[Leo]

Hmm try:

.entry-content a:not(.read-more):not(.button):hover {
    text-decoration: underline;
}

[Gian]

Perfect, thank you!

Last question, is there a simple way to change “Read More” link to the whole blog post instead of the line where the more tag is placed?

[Author]

Posts