web前端入门到实战：纯CSS导航栏下划线跟随效果

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

定义需求

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

假设 HTML 结构如下：

  
不可思议的CSS
  
导航栏
  
光标小下划线跟随
  
PURE CSS
  
Nav Underline

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

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

实现需求

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

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

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

宽度不固定

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

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

web前端开发学习Q-q-u-