HTML结构如下：
不可思议的CSS- 导航栏
- 光标小下划线跟随
- PURECSS
- NavUnderline
导航栏li的宽度不固定。从导航的左边li移动到右边li时，下划线是从左向右移动的。同样，当从导航的右边li移动到左边li时，下划线从右向左移动。设计思路：使用绝对定位，将li伪元素的宽度设置为0，悬停时，宽度从width:0->width:100%向左移动，向右移动：下划线的左偏移量初始位置设置为left:100%当鼠标悬停时，左偏移设置为0使用~选择器改变当前选中元素之后所有元素的行为：不改变当前hoverli的下划线移动方式它移动下一个里的下划线。对于当前hover的li，对应伪元素的下划线定位在left:100%，而对于li:hover~li::before，它们的定位在left:0。神奇的~选择器所以，我们急需要一种方法，可以改变下一里的下划线运动，而不改变当前悬停的里的下划线运动（好嘴巴）。没错，这里我们可以使用~选择器来完成这个艰巨的任务，这也是本例中最重要的部分。对于当前hover的li，对应伪元素的下划线定位在left:100%，而对于li:hover~li::before，它们的定位是left:0。CSS代码大致如下：li::before{content:"";位置：绝对；顶部：0；左：100%；宽度：0；高度：100%；border-bottom:2pxsolid#000;transition:0.2salllinear;}li:hover::before{width:100%;left:0;}li:hover~li::before{left:0;}点击tab跟随结合js使用active类实现点击tab跟随。active~li::before{left:0;}.active::before{width:100%;左：0；top:0;}//使用jquery$('li').on('click',function(){$(this).addClass('active').siblings().removeClass('active')})参考UnbelievableCSSCursorUnderlineFollowingEffectGitHub-chokcoco/iCSSUnbelievablePureCSSNavigationBarUnderlineFollowingEffect标签切换下划线跟随实现
