Archived topic
Animated Underline
3 replies · Started by Edwin on October 14, 2020
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%;
}
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.
Thanks Alvin,
That is working great!
Awesome. No problem. :)
