纯CSS实现导航栏下划线跟随滑动效果
⽼规矩先上张图，如何使⽤纯 CSS 制作如下效果？
在继续阅读下⽂之前，你可以先缓⼀缓。尝试思考⼀下上⾯的效果或者动⼿尝试⼀下，不借助 JS ，能否巧妙的实现上述效果。
OK，继续。这个效果是我在业务开发的过程中遇到的⼀个类似的⼩问题。其实即便让我借助 Javascript ，我的第⼀反应也是，感觉很⿇烦啊。所以我⼀直在想，有没有可能只使⽤ CSS 完成这个效果呢？
定义需求
我们定义⼀下简单的规则，要求如下：
假设 HTML 结构如下：
<ul>
<li>不可思议的CSS</li>
<li>导航栏</li>
<li>光标⼩下划线跟随</li>
<li>PURE CSS</li>
<li>Nav Underline</li>
</ul>
导航栏⽬的  li  的宽度是不固定的
当从导航的左侧  li  移向右侧  li ，下划线从左往右移动。同理，当从导航的右侧  li  移向左侧  li ，下划线从右往左移动。
实现需求
第⼀眼看到这个效果，感觉这个跟随动画，仅靠 CSS 是不可能完成的。
如果想只⽤ CSS 实现，只能另辟蹊径，使⽤⼀些讨巧的⽅法。
好，下⾯就借助⼀些奇技淫巧，使⽤ CSS ⼀步⼀步完成这个效果。分析⼀下难点：
宽度不固定
第⼀个难点，  li 的宽度是不固定的。所以，我们可能需要从  li 本⾝的宽度上做⽂章。
既然每个  li 的宽度不⼀定，那么它对应的下划线的长度，肯定是是要和他本⾝相适应的。⾃然⽽然，我们就会想到使⽤它的  border-bottom 。
li {
border-bottom: 2px solid #000;
}
那么，可能现在是这样⼦的（li 之间是相连在⼀起的，li 间的间隙使⽤  padding 产⽣）：
默认隐藏，动画效果
当然，这⾥⼀开始都是没有下划线的，所以我们可能需要把他们给隐藏起来。
li {
js导航栏下拉菜单border-bottom: 0px solid #000;
}
推翻重来，借助伪元素
这样好像不⾏，因为隐藏之后，hover  li 的时候，需要下划线动画，⽽  li 本⾝肯定是不能移动的。所以，我们考虑借助伪元素。将下划线作⽤到每个  li 的伪元素之上。
li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-bottom: 2px solid #000;
}
下⾯考虑第⼀步的动画，hover 的时候，下划线要从⼀侧运动展开。所以，我们利⽤绝对定位，将  li 的伪元素的宽度设置为0，在 hover 的时候，宽度从  width: 0 -> width: 100% ，CSS 如下：
li::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
}
li:hover::before {
width: 100%;
}
得到，如下效果：
左移左出，右移右出
OK，感觉离成功近了⼀步。现在还剩下⼀个最难的问题：
如何让线条跟随光标的移动动作，实现当从导航的左侧  li 移向右侧  li ，下划线从左往右移动。同理，当从导航的右侧  li 移向左侧  li ，下划线从右往左移动。
我们仔细看看，现在的效果：
当从第⼀个  li 切换到第⼆个  li 的时候，第⼀个  li 下划线收回的⽅向不正确。所以，可以能我们需要将下划线的初始位置位移⼀下，设置为left: 100% ，这样每次下划线收回的时候，第⼀个  li 就正确了：
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
}
li:hover::before {
left: 0;
width: 100%;
}
看看效果：
额，仔细对⽐两张图，第⼆种效果其实是捡了芝⿇丢了西⽠。第⼀个  li 的⽅向是正确了，但是第⼆个  li 下划线的移动⽅向⼜错误了。
神奇的 ~ 选择符
所以，我们迫切需要⼀种⽅法，能够不改变当前 hover 的  li 的下划线移动⽅式却能改变它下⼀个  li 的下划线的移动⽅式（好绕⼝）。
没错了，这⾥我们可以借助  ~ 选择符，完成这个艰难的使命，也是这个例⼦中，最最重要的⼀环。
对于当前 hover 的  li ，其对应伪元素的下划线的定位是  left: 100% ，⽽对于  li:hover ~ li::before ，它们的定位是  left: 0 。CSS 代码⼤致如下：
li::before {
content: "";
position: absolute;
top: 0;
left: 100%;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: 0.2s all linear;
}
li:hover::before {
width: 100%;
left: 0;
}
li:hover ~ li::before {
left: 0;
}
⾄此，我们想要的效果就实现拉！撒花。看看：
效果不错，就是有点僵硬，我们可以适当改变缓动函数以及加上⼀个动画延迟，就可以实现上述开头⾥的那个效果了。当然，这些都是锦上添花的点缀。
完整的DEMO可以戳这⾥:
最后
本⽅法最⼤的瑕疵在于⼀开始进⼊第⼀个 li 的时候，线条只能是从右往左，除此之外，都能很好的实现跟随效果。
许久没更新了，最近沉迷学习区块链相关技术，譬如以太坊编程，智能合约的编写巴拉巴拉的。后⾯
还是会把更多精⼒放在本⾏，多出⼀些前端⽂章，CSS 的魅⼒还是⽆法抵挡的。
总结
以上所述是⼩编给⼤家介绍的纯CSS实现导航栏下划线跟随滑动效果，希望对⼤家有所帮助，如果⼤家有任何疑问请给我留⾔，⼩编会及时回复⼤家的。在此也⾮常感谢⼤家对⽹站的⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。