纯 CSS 导航栏下划线跟随效果

[liuyib]

先看下效果图：

虽然纯 CSS 实现，但效果还是很棒呢！

下面来看一下具体实现。

首先准备一些 li 标签，然后使用伪类做出下划线效果：

代码如下：

<ul>
  <li>不可思议的</li>
  <li>导航栏</li>
  <li>纯CSS实现</li>
  <li>下划线</li>
  <li>跟随光标</li>
</ul>

li {
  float: left;
  position: relative;
  padding: 10px;
  list-style: none;
  cursor: pointer;
}

li::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-bottom: 2px solid #000;
}

这里使用伪类来做出下划线效果是很重要的。如果直接在 li 标签上使用 border-bottom: 2px solid #000; 来实现的话，后面是无法改变其宽度的。

当然，一开始是没有下划线的，所以需要将所有 li 伪类的宽度设为 0。

然后鼠标 hover 时，将 li 伪类的宽度从 width: 0 -> width: 100%，效果如下：

li:hover::after {
  width: 100%;
}

感觉离成功又进了一步，下面再来分析一下要实现的效果： 当鼠标移出时，下划线从右向左伸长，当鼠标移入时，下划线从左到右伸长。

想要实现下划线从右向左伸长，首先设置 li 伪类的属性 left: 100%，然后鼠标 hover 时 left: 100% -> left: 0，由于此时 width: 0 -> width: 100%，所以就有了这个效果:

代码如下：

li::after {
   content: '';
   display: block;
   position: absolute;
+ left: 100%;
   top: 0;
   width: 0;
   height: 100%;
   border-bottom: 2px solid #000;
   transition: all .2s linear;
}

li:hover::after {
+ left: 0;
   width: 100%;
}

虽然，两种效果都能实现，但也只能丢了西瓜捡了芝麻。所以下面就要请神奇的 ~ 选择器出面了。

当鼠标 hover 时，让当前 li 后面的所有 li::after 的 left 都为 0（初始是 100%），然后当鼠标 hover 后面的 li 时，由于他们伪类的 left 已经是 0，所以只有宽度在变，这样就实现了想要的效果。

添加以下代码：

li:hover ~ li::after {
  left: 0;
}

完整的 CSS 代码如下：

li {
  float: left;
  position: relative;
  padding: 10px;
  list-style: none;
  cursor: pointer;
}

li::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 0;
  width: 0;
  height: 100%;
  border-bottom: 2px solid #000;
  transition: all 0.2s linear;
}

li:hover::after {
  left: 0;
  width: 100%;
}

li:hover ~ li::after {
  left: 0;
}

Demo 体验地址：https://liuyib.github.io/demo/note/underline-follow/

---

原文链接：https://juejin.im/post/5ab9e9056fb9a028be360292