Site logo

Archived topic

How to underline the text (link) on mouseover as in example.

42 replies · Started by francesco on February 1, 2022

Viewing posts 1–15 of 43

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

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

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

fehu.it

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.

Use this CSS instead:

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

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

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;
}

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?

basically I would need this effect here too.

(home page)

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;
}

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.

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

This archived topic is closed to new replies.