css - 超链接的线性渐变下划线

Question

我想对我的链接应用线性渐变。只要超链接的文本保持在同一行，下面的代码就可以正常工作。但是当文本被分成几行时(即:因为浏览器宽度很小)，只有超链接的最后一行有下划线。

有人知道我该如何解决吗？或者我是否使用了正确的方法来实现这一点？

a{
   color: white;
   text-decoration: none;
   border-bottom: none;
   position: relative;
}


a::after {
   content:'';
   width:100%;
   position: absolute;
   left:0;
   bottom:-1px;
   height: 3px;
   background: #30e8bf;
   background: -webkit-linear-gradient(to right, #30e8bf, #ff8235);
   background: linear-gradient(to right, #30e8bf, #ff8235);
}

You can test it on this CodePen sketch

Answer 1

我认为最简单的方法是使用背景图片。这将需要一些调整，但它应该让你开始:

Codepen

a {
    display: inline;
    text-decoration: none;
    background-image: linear-gradient(transparent, transparent),linear-gradient(transparent, transparent),linear-gradient(to right, #30e8bf, #ff8235);
    background-repeat: no-repeat;
    background-position: 120%, 122%, 0 130%;
background-size: 100% 10px;

}