从头开始创建
个人网站而不是使用
现成的主题的优点之一是，我从默认的浏览器设置开始，然后逐渐添加自己的颜色。 我试图防止网站膨胀，但是个性化是很重要的。 有必要在一方面
Hacker News和
Craigslist的Spartan页面与另一方面
旧MySpace的拥塞之间找到折衷方案。
不知何故，我遇到了一个网站，上面有精美的下划线动画链接，我想实现这种效果。 但是使用纯CSS对我来说很重要，因为出于这种琐碎的事情，不值得添加JavaScript，因为JavaScript可能会导致界面的性能或可用性出现问题（请参阅
劫持滚动条 ）。
这是现在的效果：
实作
在文本下画线是
一个令人惊讶的复杂主题 。 这完全取决于您准备
偏离标准多远以及您担心什么细节（例如，
通过字母的远程元素传递 ）。
我探索了
两种 方法 。 从本质上讲，它们两者都删除了标准的
文本修饰，并使用
伪元素添加了模拟边框。 然后通过
CSS过渡为该边框设置动画。 不幸的是，这些解决方案有一个缺点：如果链接覆盖多条线路，它们将无法正常工作。 下划线仅出现在第一行。
最后，我发现了
Shaw的 CodePen ，没有这个缺陷，并且改变了我的口味。
这是相关的代码。 您可以在
repl.it上与他一起
玩。a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-position: 0% 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size .3s; } a:hover { background-size: 100% 2px; }
让我们更详细地考虑此解决方案。
首先，关闭标准
text-decoration 。
我们将不得不使用背景图像，因为它可以覆盖多行。 尽管您可以拍摄真实照片，但它只是一条线，因此我们使用
线性渐变来为我们生成图像。 通常，它用于在两种不同颜色之间创建渐变，但是我们需要使下划线与链接具有相同的颜色，因此我们将
currentColor用于渐变的开始和结束。
currentColor告诉浏览器使用
color属性中元素的
颜色 。
使用
背景位置将图像放置在左下角。
0%的值对应于水平位置，而
100%对应于垂直位置。
关闭
后台重复以防止图像的多个实例。
使用
background-size，指定两个像素的零宽度和高度。 零宽度表示下划线仅在悬停时出现，否则图片不可见。
设置
过渡以适合背景，因此任何属性更改都需要
0.3秒。
当您将鼠标悬停在链接上时，我们会将图像宽度更改
100% ，创建完整的下划线，并且
transition提供动画。
仅此而已！ 我对代码的简洁感到非常满意。 如果您想添加类似于您的网站的内容，请随时采用此实现或查看其他
动画下划线效果 。