动画成块状背景的链接下划线

这是一个很酷的小效果。 默认链接样式带有一个下划线（这是个 好主意），然后在 :hover 上，您会看到下划线实际上变厚了，变成了几乎与您在链接上使用 background-color 时看起来一样的效果。

以下是在 Superfriendly 网站上该效果的示例

一段旅程

• Superfriendly 网站使用 box-shadow 来实现它。 将 box-shadow: inset 0 -0.07em 0 #0078d6; 转换为 box-shadow: inset 0 -0.85em 0 #a2d5fe; 并使用过渡。 Andres Cuervo 将这个想法移植到了一个 Pen 上。（我在 分叉它 来修复“起始偏移”想法，这个想法在我看来在原始版本上似乎被破坏了）。
• 您可能很想用一个伪元素来绘制线条，例如，该伪元素在相对定位的链接内绝对定位。 然后，您可以对其高度或 scaleY 或其他内容进行动画处理。 这是一个 这种想法。 您的敌人将是换行的链接，box-shadow 似乎可以更优雅地处理这些链接。
• 另一个想法是使用 linear-gradient 和硬色停顿来“伪造”线条的绘制，这些线条的位置看起来像下划线。 然后，渐变可以进行动画处理，以在悬停时覆盖元素，可能通过移动其 background-position。 这就是这种想法，还有 我们之前写的一个示例。 这比以前的方法更能处理换行。
• 默认的 text-decoration: underline; 如今有一个明显的优势：text-decoration-skip-ink！ 链接默认情况下会巧妙地绕过文本中的下降部，从而形成 更漂亮 的下划线，比这些技术（以及边框）中的任何一种都能实现。 有些属性相对较新，您可能没有意识到，它们可以让您更好地控制我们传统上所拥有的下划线，例如 text-decoration-color。 但是还有更多，比如厚度和偏移，这些使得这种效果成为可能！ Miriam Suzanne 有一个该效果的演示，目前仅在 Firefox Nightly 中有效，但很快就会在其他浏览器中普及。

总结：如果您现在需要在尽可能多的浏览器中实现这种效果，那么 box-shadow 技术可能是最好的。 如果这仅仅是一个可以稍后进行的增强，那么使用 text-decoration-thickness / text-decoration-offset / text-decoration-color 并添加过渡是一个更好的选择，因为它在美观性、可控性和代码可读性方面都更胜一筹。