I recently created a vertical menu with an interesting underline effect that appears when hovering over the menu items.
Even though the snippet initially failed to execute, I discovered this cool hover effect (taken from here) which I wanted to implement:
/* LEFT TO RIGHT */
.sliding-u-l-r {
display: inline-block;
}
.sliding-u-l-r:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.sliding-u-l-r:hover:after {
width: 100%;
background: blue;
}
Oddly enough, in Chrome only, there seems to be a peculiar issue where the browser height experiences a rapid change during the animation, leading to a flickering scrollbar (appearing and disappearing rapidly).
The menu's height remains consistent throughout, and I'm uncertain how to resolve this. Simply hiding the overflow isn't a viable solution, unless it can be disabled solely during the animation.
Below is the working snippet (excluding the caret pseudo-element placement). Even though it pertains to a different scenario, the problem doesn't arise here: