[Support request] How to underline the text (link) on mouseover as in example.

[francesco]

I tried to search the forum but without success. is it possible to create this effect?

[Fernando]

Hi Francesco,

One approach you can do to add this effect is to first add a CSS class(“add-on-hover-underline”) in the Advanced section of the Block’s settings.

See this for reference: https://share.getcloudapp.com/6quEGppo

Then add this custom CSS to your website.

.add-on-hover-underline a:hover {
    text-decoration: underline !important;
}

Please refer to this link for assistance regarding adding CSS: https://docs.generatepress.com/article/adding-css/

Kindly let me know if this works. 🙂

[francesco]

Thanks for the reply. i did as you told me but it doesn’t seem to work.

fehu.it

[David]

Hi there,

can you provide a link to where we can see this? And a password to get past any coming soon pages.
You can share the info in the Private Information field.

[francesco]

ok done. you can see?

https://fehu.it/

[David]

Use this CSS instead:

.paging-navigation p a:hover {
    text-decoration: underline;
}

[francesco]

thanks, but if i want to hook this effect elsewhere too? esempio nella homepage sul excerpt?

[David]

Your home page posts have a dynamic container link, there is no <a> element being used in the Excerpt.

So do you want the excerpt text underlined ?
If so you can add this:

.dynamic-entry-excerpt p {
    text-decoration: underline;
}

[francesco]

Many thanks. I understand that I need to add CSS for each link I want to underline right? and if I also wanted it in the news or in the title of the contents on the home page? where can i find a list of codes? I understand that it is enough to change the subject to which to set this effect. right?

[francesco]

basically I would need this effect here too.

(home page)

[David]

For all those links.
REMOVE this:

.paging-navigation p a:hover {
    text-decoration: underline;
}

ADD this:

.paging-navigation p a:hover,
.rpwwt-sticky a:hover,
.generate-columns-container:hover h2 {
    text-decoration: underline;
}

[francesco]

I did as you told me. but now when I go to an article I select them all. (I state that I only added the code you sent me without doing anything else).

see image.

in addition to this, the effect does not appear on the navigation of news and posts.

[David]

I made a correction to my CSS here:

https://generatepress.com/forums/topic/how-to-underline-the-text-link-on-mouseover-as-in-example/#post-2101349

[francesco]

sorry if i answer you after days but i was sick because of the covid. having said that, unfortunately, nothing has changed.

[francesco]

https://fehu.it/

check if you can.

[Author]

Posts