css切换效果的问题

我问下怎么实现：字下面那个绿色的的横杠在点击的时候是，是向左移或者右移的效果，并且准确的在字体下方

绿条定位，并且设置过渡属性translate: left .4s;，获取当前点击项在可视区域的左边距，然后设置绿条的left值

可以用class名::after来写个样式，点击到那个就把这个class名加给谁

flex布局应该可以解决