下划线对大家来说并不陌生，在一些重要的事项或者需要我们着重强调的地方经常会用到下划线来作为提示，那么，下划线的实现方式难吗？ 说到这儿可能很多小伙伴就会飘来不屑的眼光，这有何难，三下五除二就可以实现，的确，这我相信大家实力，但是大家有没有想过如何通过CSS相关属性为你的下划线添加更加华丽的动画效果呢。
目标
在链接下方的彩色下划线，具有悬停效果，其中该行后退并被另一条不同颜色的线替换。在这个动画中，线条不应该接触，在它们之间留出一些空间。
换行的链接应该在所有行下都有下划线。
使用背景方法
有许多不同的方法来给一段文字加下划线。我最终使用的满足所有要求的方法是：使用 CSS 属性background-image。
通过将背景图像定义为从一种颜色过渡到同一种颜色的线性渐变，背景图像可以是纯色。
如果我打算使用纯色，为什么要使用background-image属性而不是background-color属性呢？
因为许多操纵背景的属性只有在使用背景图像时才起作用。
背景的大小在高度上受到限制，并通过将背景大小分别设置为2px和100%来占用锚元素的整个宽度。
这最后还是覆盖了整个背景，因为现在它反复重复，直到覆盖了整个背景。所以我把background-repeat设置为no-repeat，以此来阻止它重复导致北京被覆盖。
线在锚元素的顶部！在背景位置设置为0的情况下定位它100%将其放置在左边缘，并且100%位于锚元素的上边缘。
换句话说，在底部…现在在底部。
公共 HTML 代码如下：
<a href="#">mybjmybjmybjmybj</a> <br /><br /> <div><a href="#">on multiple lines.</a></div>
公共 CSS 代码如下：
body {
background-color: #222b40;
font-size: 3rem;
}
div {
width: 200px;
}
最简单的下划线实现 CSS 代码：
a {
color: #dfe5f3;
text-decoration: none;
background-image: linear-gradient(rgb(176, 251, 188), rgb(176, 251, 188));
background-size: 100% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
}
效果如下：
结语
以上就是今天为大家带来的纯 CSS 实现动画环绕下划线效果，希望对大家具有一定的参考价值，文中有表达不清楚的地方请多多包涵，，也欢迎大家留言讨论。