How to make animation for underline?

Question

Animation

Hello. There are such tabs
Green underline is the border-bottom of each tab. It is necessary to make sure that when switching, the dash smoothly switches to the active tab.
Here is an example of how it should look
. This example is unfortunately for swift applications. And for the web, I can’t find such examples ((((
PS I’m thinking of changing this tab to a simpler one, but I can’t find anything better. If you have similar libraries in stock, I would be grateful. I would like to find adaptive tabs, but cap to be in the form of a slider Example

Answer 1

Once upon a time I did it on JQ , maybe it will suit you

Answer 2

https://codepen.io/mnafricano/pen/jcrzm

Answer 3

The green underline is the border-bottom of each tab. It is necessary to make sure that when switching, the dash smoothly switches to the active tab.

We do it with the help of js and span, for example, otherwise there is no way. You can, of course, mess with border-bottom, but why?
Catch a click on a tab, read the width of the tab link and its position, and generate the animation.

Answer 4

If the width is different then only with js. if it's the same then you can do it in pure css. but this introduces a number of limitations. Google will help you and the phrase " lavalamp menu js "