How to make border-bottom move smoothly when hovering over a link?

Question

JavaScript

Hello, there are 4 links and one of them, the current one we are on, is underlined.
We need to implement an effect so that when hovering over another, the border-bottom moves smoothly under the element we are hovering over.
Help with implementation.

Answer 1

code pen