[Resolved] Link hover animation in text and title

[Bogdan]

Hello

I’ve added this menu hover animation from your documentation:

@media (min-width: 769px) {
    .main-navigation .menu > .menu-item > a::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 15px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);

        display: block;
        width: 0;
        height: 2px;
        color: #E0202C;
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    .main-navigation .menu > .menu-item.current-menu-item > a::after,
    .main-navigation .menu > .menu-item.current-menu-ancestor > a::after,
    .main-navigation .menu > .menu-item > a:hover::after {
        width: 50%;
    }
}

It works great and looks neat.
Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
Can you please help me do that?

My site is Optimize My Life

[Bogdan]

PS: I’ve just noticed that the navigation search stopped working after adding the above css. How can I fix that?

[Elvin]

Hi,

Now I want to add the same effect for the links inside every article and for the header links (like the ones on the home page, category pages, archives, etc.)
Can you please help me do that?

You can try this out.

@media (min-width: 769px) {
/* for articles */
article > .inside-article a{
	position:relative;
}
article > .inside-article a:after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        color: #E0202C;
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    
article > .inside-article a:hover:after {
        width: 50%;
}
/* For page hero*/
.page-hero a{
	position:relative;
}

.page-hero a:after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        color: #E0202C;
        background-color: currentColor;
        transition: 0.3s width ease;
    }
    
.page-hero .inside-article a:hover:after {
        width: 50%;
}
}

Please do mention if I missed anything you want this applied to. Thank you.

[Bogdan]

Hi Elvin,

this does work, but it also adds the same effect to almost everything else that is clickable, including images and buttons (which looks weird). I want to exclude such elements and have it only appear for the links in the text and the headers.

[David]

Hi there,

try this CSS:

@media (min-width: 769px) {
    .entry-content p > a,
    .page-hero a {
        position:relative;
    }
    .entry-content p > a:after,
    .page-hero a:after {
            content: "";
            position: absolute;
            right: 0;
            left: 50%;
            bottom: 0px;
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
            display: block;
            width: 0;
            height: 2px;
            color: #E0202C;
            background-color: currentColor;
            transition: 0.3s width ease;
        }
        
    .entry-content p > a:hover:after,
    .page-hero a:hover:after {
            width: 100%;
    }
}

[Bogdan]

Thank you David!

This works great for the links inside the posts.
Is there a way to add the same effect if you hover over the post titles on the home page or category pages?

[Elvin]

You can try this code. This specifically targets the post titles on home and any archive pages.

@media (min-width: 769px) {
/* for articles */
article.post > .inside-article > .entry-header > .entry-title > a{
	position:relative;
}
article.post > .inside-article > .entry-header > .entry-title > a:after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: 0px;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        color: #E0202C;
        background-color: currentColor;
        transition: 0.3s width ease;
}
    
article.post > .inside-article > .entry-header > .entry-title > a:hover:after {
        width: 50%;
}
}

[Bogdan]

Thanks Elvin, that code does the job quite well.

Just one small problem: for longer titles, only the text on the second row gets animated
like this

Is there a way to fix that?

[David]

Nothing can be done to fix that.
The closest you can get is an underline expanding from start to end using this CSS:

article.post>.inside-article>.entry-header>.entry-title>a,
.entry-content p>a,
.page-hero a {
    text-decoration: none;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)),
        linear-gradient(#c73337, #c73337);
    background-size: 100% 2px, 0 2px;
    background-position: 100% 100%, 0 100%;
    background-repeat: no-repeat;
    transition: background-size 0.2s linear;
}

article.post>.inside-article>.entry-header>.entry-title>a:hover,
.entry-content p>a:hover,
.page-hero a:hover {
    background-size: 0 2px, 100% 2px;
}

[Bogdan]

Got it. That’s not such a problem.

Thank you both for helping me out.

[David]

Glad we could be of help

[Author]

Posts