[Support request] hover underline

[Elvin]

I can’t seem to find this text link for the shop to actually test the selectors.

Can you point me to the site where the https://www.mmgraphik.com/shop/ link is placed?

Screenshots or recordings of which links to style would help too. 🙂

Perhaps we’re using the wrong selectors. .entry-content a is meant to be used for links inside the content area. If you want to style links on different parts of the site, we’ll have to check which selectors they use and style it from there.

[Matthieu]

This is the page where the links start :

[Elvin]

Try this CSS:

.entry-content a[href='https://www.mmgraphik.com/a-propos/'], .entry-content a[href='https://www.mmgraphik.com/shop/']{
    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='https://www.mmgraphik.com/a-propos/']:hover, .entry-content a[href='https://www.mmgraphik.com/shop/']:hover {
    background-position: 0% bottom;
    text-decoration: none;
    -webkit-transition-duration: 750ms, 250ms;
    transition-duration: 750ms, 250ms;
}

Here’s a demo video of it: https://share.getcloudapp.com/2Nujo1L5

[Matthieu]

It works perfectly thank you very much ! Last quick question: If I want to have this effect in the footer or in a footer element, is it possible ? (I tried by copying and pasting the link to redo the same manipulation but it does not work)

[Elvin]

It works perfectly thank you very much ! Last quick question: If I want to have this effect in the footer or in a footer element, is it possible ? (I tried by copying and pasting the link to redo the same manipulation but it does not work)

Using .site-footer a and .site-footer a:hover as the selector/s should work for the footer if you want this to apply on the footer links.

[Matthieu]

Hello, I just tried it not working as expected (see bottom of page to “plan du site”) :

[Elvin]

Hello, I just tried it not working as expected (see bottom of page to “plan du site”) :

The selector styling it is slightly wrong.

.site-footer a:hover[href='https://www.mmgraphik.com/plan-du-site/'] should be .site-footer a[href='https://www.mmgraphik.com/plan-du-site/']:hover

Also, I see you’re using a child theme and autoptimize. That said, after adding the change, make sure to clear cache if in case the CSS change doesn’t apply on the live site.

[Matthieu]

That’s perfect, thank you so much ! 😃

[Elvin]

No problem. 🙂

[Author]

Posts