Есть несколько путей реализации разной сложности.
1. JS-версия: через класс-модификатор "active" двигаем и изменяем размеры ползунка сделанного отдельным элементом. js же и вычисляем необходимые размеры и положение.
2. CSS#1 - Двигать ползунок в зависимости от активного пункта меню через селектор ".active ~ .underline"
Пример частичной реализации нашел на codepen
Минус в том, что активное состояние каждого пункта нужно описывать отдельно ручками, и если это проект обновляемый, то такое решение слишком геморойное в плане добавления и изменения пунктов меню.
3. CSS#2 - Играть анимациями в пределах одного пункта меню. Например, дял смены на соседний пункт, ползунок от первого пункта сдвинуть на 50%, показываем ползунок(display: block) следующего пункта с задержкой анимации сдвинутым в сторону предыдущего на 50%, скрываем ползунок предыдущего (display: none), заканчиваем анимацию сдвигом видимого ползунка.
Тут проблема в переходе с переходом через 2-3 пункта меню. Не думаю, что это нереально, но реализуется не без костылей. Плюс в том, что размеры и положение вычислять через js нет необходимости.
Простой
