[Resolved] Animated Underline

[Edwin]

Hi

How to have the same effect for the offside menu (.slideout-navigation)? Taken from post 200801

https://generatepress.com/forums/topic/animating-link-underlines-for-main-menu/#post-200801

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

background-color: currentColor;
transition: 0.3s width ease;
}
.main-navigation .menu > .menu-item.current-menu-item > a::after,
.main-navigation .menu > .menu-item > a:hover::after {
width: 50%;
}

[Elvin]

Hi,

You can try this CSS out:

/* for articles */
.slideout-navigation.main-navigation .main-nav ul li a{
	position:relative;
}
.slideout-navigation.main-navigation .main-nav ul li a:after {
        content: "";
        position: absolute;
        right: 0;
        left: 0;
        bottom: 0;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        display: block;
        width: 0;
        height: 2px;
        background-color: currentColor;
        transition: 0.3s width ease;
}
    
.slideout-navigation.main-navigation .main-nav ul li a:hover:after {
        width: 50%;
}

You can change the left, right & translateX() values for its placement. You can also change width:50% if you want longer lines.

[Edwin]

Thanks Alvin,

That is working great!

[Elvin]

Awesome. No problem. 🙂

[Author]

Posts