前言
在码代码之前了，我们可以尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果？
在这之前了，有一次需求就是实现这个效果，我是用js实现的。其实用 Javascript ，也是很麻烦。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？
好的，今天我们就用CSS完成这个效果。
解析
我们定义一下简单的规则，要求如下：
1、假设 HTML 结构如下：
- Web秀
- CSS导航栏
- 今日头条
- 开源中国
2、li 的宽度是不固定的
3、当从左侧 li 移向右侧 li，下划线从左往右移动。同理，当从导航的右侧 li 移向左侧 li，下划线从右往左移动。
看整个效果，我们不知道如何做起的时候，我们先一步一步来，先完成前2个效果。
第一步
.cssnav{
position: absolute;
display: flex;
}
.cssnav li{
position: relative;
list-style: none;
padding: 20px;
font-size: 24px;
color: #000;
line-height: 1;
cursor: pointer;
}
这里用到了flex布局，相信一直和我一起学习的小伙伴，应该都会了，这里不做过多的解释了，不明白的，请看:
第二步
很多小伙伴，应该第一想法是用border-bottom来实现下面的底边效果。但是是不是忽视了整个li是不能移动的了？所以这个是行不通的，我们用:before伪类来实现底边，同时可以移动。
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%;
}
额，这时候的效果并不对，好像缺少了过渡效果，很僵硬。于是添加过渡效果。
li::before{
...
transition: 0.2s all linear;
}
于是，就有了这个效果。细心的小伙伴是不是发现，效果还是不对了？如果看不出来的小伙伴，可以把过渡效果时间设置长一点(0.5s)。第一个 li 的方向是正确了，但是第二个 li下划线的移动方向又错误了。
~ 选择符
所以，我们需要一种方法，能够不改变当前 hover 的 li 的下划线移动方式，却能改变它下一个 li 的下划线的移动方式。
这里我们可以借助 ~ 选择符，完成最重要的部分。
对于当前 hover 的 li ，其对应伪元素的下划线的定位是 left: 100%，而对于 li:hover ~ li::before，它们的定位是 left: 0。
li:hover::before{
width: 100%;
left: 0;
}
li:hover ~ li::before{
left: 0;
}
ok，效果已经全部搞定，是不是超级简单了？
如果觉得效果有点僵硬，我们可以再添加动画延迟。
li:hover::before{
width: 100%;
top: 0;
left: 0;
transition-delay: 0.1s;
border-bottom-color: #000;
z-index: -1;
}