[Support request] hover underline

[Matthieu]

Hello, I would like to know if it was possible to apply an underline effect to a word or text on mouse over ?

Thanks

[Elvin]

Hi,

If its a link throughout the whole site, you can set the link hover color on Dashboard > Appearance > Colors > Body. You should be able to see a “Link color hover” state that lets you change the :hover color of links.

If its a specific text you want this applied, you may have to use Custom CSS.

[Matthieu]

Hello for the allocation of colors there is no problem. On the other hand, the effect I would like to have is a relief effect like this : https://www.lunaweb.fr/

Thanks

[Tom]

Hi there,

They’re doing something like this I believe:

.entry-content a {
    background-image: linear-gradient(to right, #2e55ff 33.333%, transparent 33.333%, transparent 66.666%, #2e55ff 66.666%);
    background-repeat: no-repeat;
    background-position: 100% bottom;
    background-size: 300% 1px;
    transition-property: background-position, color;
    transition-duration: 0ms, 250ms;
    transition-timing-function: ease-out, ease-ine;
}

.entry-content a:hover {
    background-position: 0% bottom;
    text-decoration: none;
    -webkit-transition-duration: 750ms, 250ms;
    transition-duration: 750ms, 250ms;
}

[Matthieu]

Thank you for your reply. The css must be in appearance> customize> additional css ?

Is it possible to attribute the effect to a single word ?

Thanks

[Elvin]

Hi,

If you must target a specific word, consider adding format to it on the editor. Like wrapping it in span so we could target it w/ CSS.

Alternatively, you can try direct string replacement on all of your contents w/ PHP snippets.

Something like this one:

add_filter('the_content',function(){
$str = 'Comedy';
$pattern = '/\s?\b'.$str.'\b\s?/i';
	if(preg_match_all($pattern, $str, $matches)){
		foreach ($matches as $target){ return str_replace($str, '<span class="hover-effect">'.$str.'</span>', get_the_content() ); }		
	}
});

This code looks for the text “Comedy” in your content and wraps it in <span class="hover-effect">.

Note: if you want to reuse this, you can change the $str = 'Comedy'; from ‘Comedy’ to any word.

Once the specific text is wrapped in with a selector, you can target to add CSS like this:

.entry-content span.hover-effect {
    background-image: linear-gradient(to right, #2e55ff 33.333%, transparent 33.333%, transparent 66.666%, #2e55ff 66.666%);
    background-repeat: no-repeat;
    background-position: 100% bottom;
    background-size: 300% 1px;
    transition-property: background-position, color;
    transition-duration: 0ms, 250ms;
    transition-timing-function: ease-out, ease-ine;
}

.entry-content span.hover-effect:hover {
    background-position: 0% bottom;
    text-decoration: none;
    -webkit-transition-duration: 750ms, 250ms;
    transition-duration: 750ms, 250ms;
}

[Matthieu]

It seems to work for one word, is there a possibility to be able to have the effect on several words at the same time ?

Thanks

[Elvin]

It seems to work for one word, is there a possibility to be able to have the effect on several words at the same time ?

To clarify: Are these words all in one phrase or words that are scattered throughout the content? Also, are these words “links” or are they just plain words?

[Matthieu]

So these words are precise links, example: In the sentence “Design of print & web projects”

The link is on: “print & web” it is on these words that I would like to have the effect

And that on other words contained in other sentences of the site

Thanks

[Elvin]

Oh that’s good then.

If they’re already links then we can modify what Tom provided.

We just need to add specificity to the CSS code by adding a unique attribute selector.

Example: Instead of using a less specified .entry-content a, we can use .entry-content a[href='https://www.google.com']

.entry-content a[href='/your-url-here'] {
    background-image: linear-gradient(to right, #2e55ff 33.333%, transparent 33.333%, transparent 66.666%, #2e55ff 66.666%);
    background-repeat: no-repeat;
    background-position: 100% bottom;
    background-size: 300% 1px;
    transition-property: background-position, color;
    transition-duration: 0ms, 250ms;
    transition-timing-function: ease-out, ease-in;
}

.entry-content a[href='/your-url-here']:hover {
    background-position: 0% bottom;
    text-decoration: none;
    -webkit-transition-duration: 750ms, 250ms;
    transition-duration: 750ms, 250ms;
}

Just replace the value /your-url-here with the URL of the text link you want to add the hover underline style to.

Here’s how to add CSS – https://docs.generatepress.com/article/adding-css/

[Matthieu]

Thanks for your reply, it works fine for the link. If ever I have several links, therefore [href = ‘/ your-url-here’] to add, how should I proceed ?

[Elvin]

Thanks for your reply, it works fine for the link. If ever I have several links, therefore [href = ‘/ your-url-here’] to add, how should I proceed ?

You can do something like this:

.entry-content a[href='/your-url-here'], .entry-content a[href='/another-url-here'], .entry-content a[href='/more-url-here'] {
   ...
}

.entry-content a[href='/your-url-here']:hover, .entry-content a[href='/another-url-here']:hover, .entry-content a[href='/more-url-here']:hover {
   ...
}

You simply add comma for the other links you want to specifically style.

If in case you want to go back to just styling all of the links in the content the same way, you can use Tom’s code that uses .entry-content a. 🙂

[Matthieu]

I don’t feel like it works for me adding .entry-content to [href = ‘/ your-url-here’], .entry-content to [href = ‘/ your-url-here’] ,

[Elvin]

Try changing the code to this.

.entry-content > a[href='/your-url-here'], a[href='/another-url-here'], a[href='/more-url-here'] {
/*style here*/
}
.entry-content > a[href='/your-url-here']:hover, a[href='/another-url-here']:hover, a[href='/more-url-here']:hover {
/*on hover style here*/
}

[Matthieu]

It only works on one link out of both.

[Author]

Posts