关于如何制作干净的CSS导航栏下划线跟踪的教程

如何使用干净的CSS来创建以下效果？

请花点时间继续阅读下面的内容。试想一下上面的效果或者自己尝试一下，看看是否可以在不使用JS的情况下熟练地实现上面的效果。

好的，继续。这个效果是我在业务开发过程中遇到的类似的小问题。事实上，尽管我使用Javascript，但我的第一反应是感觉很别扭。所以我一直想知道是否可以仅使用CSS来实现这种效果？

定义需求

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

• 假设HTML结构如下：

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

• 导航列宽度

  不固定

• 左侧导航 li 向右移动 li 并且下划线从左向右移动。同样，当从导航右侧li移动到左侧li时，下划线从右向左移动。

实现要求

当我第一次看到这个效果的时候，我觉得接下来的这个动画只用CSS是不可能实现的。

如果你只想使用 CSS 来实现这一点，你可以找到另一种方式并使用一些巧妙的方法。

好了，下面就是一步一步使用CSS实现这个效果的技巧了。分析一下难度：

宽度不固定

第一个难度是li的宽度不固定。这就是为什么我们可能必须警告自己li的宽度。

由于每个li的宽度是不确定的，因此其对应的下划线的长度必须与其相适应。自然地，我们会想到使用它边缘区域。

li {
    border-bottom: 2px solid #000;
}

所以，也许现在看起来像这样（李连接在一起，李之间的间隙是使用填充创建的）：

默认隐藏，动画效果

他们最初都没有下划线，所以我们可能必须隐藏它们。翻译

li {
    border-bottom: 0px solid #000;
}

并使用伪元素

似乎不起作用，因为隐藏 li 后需要一个下划线动画，并且不能移动。 。这就是我们考虑使用伪元素的原因。对每个 li 伪元素使用下划线。

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

考虑下面的第一阶段动画。悬停时，下划线应从一侧移动以展开。因此，我们使用绝对定位将伪元素li的宽度设置为0。悬停时，宽度从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向右移动时li，下划线从左向右移动。同样，当从导航右侧li移动到左侧li时，下划线从右向左移动。

我们来仔细看看现在的效果：

从第一个li切换到第二个lililili时 下划线拉动方向错误。因此，我们可能需要移动下划线的起点并将其设置为左侧：100%，以便每当绘制下划线时，第一个li位于右侧：

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

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

看看效果：

好，仔细对比两张图。另一个效果其实就是收芝麻丢西瓜。第一个 li 的方向是正确的，但第二个 li 将下划线移动到错误的方向。 † 对译者有利）。

没错，这里我们可以使用~选择器来执行这个艰巨的任务，这也是这个例子中最重要的部分。当前悬停hLi的定位相应的伪元素被放置： 左：100 %但Li：悬停 ~ li :: 在之前，它们的位置是。 CSS代码大致如下：

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

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

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

至此，就达到了想要的效果了！撒上鲜花。请参阅：

效果很好，但有点僵硬。我们可以适当改变浮雕函数，并在动画延迟