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