A thing I commonly see nowadays are animated lines underneath menus and links:
One issue with that though: when hovering over an item the animation does not start from the place where you hover, but from a fixed point (here: bottom-center).
Try hovering an item from one of its edges and you’ll see: the animation is disconnected from your point of entry. This can feel weird, especially for wide items.
Thanks to CSS Custom Properties (aka CSS Variables) and a little bit of JavaScript, the animation can be enhanced. Here’s a demo by Tobias Reich:
Also feels really smooth when moving your cursor horizontally over the items.
Direction Aware Hover Effect Demo (CodePen) →
🤩 I really like this JS/CSS Custom Properties combo, it’s so powerful … that’s one of the reasons why I and others are really excited about CSS Custom Properties
💡 You could keep this pure CSS, but that would mean injecting lots of extra elements to detect the direction.