纯CSS实现导航栏下划线跟随滑动效果

老规矩先上张图，如何使用纯 CSS 制作如下效果？

在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一下，不借助 JS ，能否巧妙的实现上述效果。

OK，继续。这个效果是我在业务开发的过程中遇到的一个类似的小问题。其实即便让我借助 Javascript ，我的第一反应也是，感觉很麻烦啊。所以我一直在想，有没有可能只使用 CSS 完成这个效果呢？

定义需求

我们定义一下简单的规则，要求如下：

假设 HTML 结构如下：

导航栏目的  li  的宽度是不固定的

当从导航的左侧  li  移向右侧  li ，下划线从左往右移动。同理，当从导航的右侧  li  移向左侧  li ，下划线从右往左移动。
 

实现需求

第一眼看到这个效果，感觉这个跟随动画，仅靠 CSS 是不可能完成的。

如果想只用 CSS 实现，只能另辟蹊径，使用一些讨巧的方法。

好，下面就借助一些奇技淫巧，使用 CSS 一步一步完成这个效果。分析一下难点：

宽度不固定

第一个难点，  li 的宽度是不固定的。所以，我们可能需要从  li 本身的宽度上做文章。

既然每个  li 的宽度不一定，那么它对应的下划线的长度，肯定是是要和他本身相适应的。自然而然，我们就会想到使用它的  border-bottom 。

那么，可能现在是这样子的（li 之间是相连在一起的，li 间的间隙使用  padding 产生）：

默认隐藏，动画效果

当然，这里一开始都是没有下划线的，所以我们可能需要把他们给隐藏起来。

推翻重来，借助伪元素

这样好像不行，因为隐藏之后，hover  li 的时候，需要下划线动画，而  li 本身肯定是不能移动的。所以，我们考虑借助伪元素。将下划线作用到每个  li 的伪元素之上。

下面考虑第一步的动画，hover 的时候，下划线要从一侧运动展开。所以，我们利用绝对定位，将  li 的伪元素的宽度设置为0，在 hover 的时候，宽度从  width: 0 -> width: 100% ，CSS 如下：