CSS实现导航栏下划线跟随

前言

学习了 CSS 选择器之后，我们会对选择器有个大致的认识，通过所学的知识，来实现导航栏下划线的跟随效果

开始

首先，我们先看效果图，如何使用 CSS 完成以下的结果呢？

思考

首先，要完成以上的动画效果，我们需要将 html 布局完成，然后我们知道，动画的效果是当我们从导航的左侧到右侧时，下划线从左往右移动。同理，当我们从导航的右侧到左侧时，下划线从右往左移动。

布局

在这里使用列表布局

一开始，我们给他一个 border-bottom，

它是这样的

当然，我们一开始并不需要显示,所以以上代码可以不用管它

实现

这里我们借助伪元素，通过对伪元素的 width 以及left 的控制，实现动画的显示与隐藏和位置的改变,

实现的效果是这样的：

我们会发现当从第一个到第二个的时候，下划线手绘的方向不正确，所以我们需要将下划线的初始位置设置为 left:100%.

这样的话，下划线收回的时候是这样的：

可以发现，第一个 li 的方向是正确了，但是第二个 li 下划线的移动方向又错误了。

修正

所以，我们需要使用一种方法，可以帮助我们更改下划线的移动方向。这个时候，可以借助 ~ 选择符。
通过这个选择符我们可以改变当前hover下li之后的所有 li 的 left 值以此来改变下划线的方向。

这样，我们的效果就完成了，可以看到下划线随着方向的改变而改变。

结尾

虽然大致的效果已经实现了，但第一个li元素的左移还是有点小问题（暂时没想到解决方法）