How to implement a page marker?

Question

css

How to implement a marker that displays what page you are currently on. With transition animation and marker size transition. An example can be viewed on the Google Music
web application by switching between tabs.

Answer 1

There are several ways to implement different complexity.
1. JS-version: through the "active" modifier class, we move and resize the slider made by a separate element. js and calculate the required dimensions and position.
2. CSS#1 - Move the slider depending on the active menu item through the ".active ~ .underline" selector
An example of a partial implementation was found on codepen The
downside is that the active state of each item needs to be described separately with pens, and if this is an updated project, then such a solution is too cumbersome in terms of adding and changing menu items.
3. CSS#2 - Play animations within one menu item. For example, to change to a neighboring item, move the slider from the first item by 50%, show the slider (display: block) of the next item with the animation delay shifted towards the previous one by 50%, hide the previous slider (display: none), end the animation with a visible shift slider.
Here the problem is in the transition with the transition through 2-3 menu items. I do not think that this is unrealistic, but it is not realized without crutches. The advantage is that there is no need to calculate the sizes and position through js.