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;

}

Answer 2

<强> CSS

.headline{
border-width: 3px;
width: 20%;
height: 4px;
margin: 0px auto;
text-decoration: underline;
background: linear-gradient(to right, #2AD7BD , #2AD7E8);}

<强> HTML

<div class="headline"></div>

线性渐变下划线为超链接

2 个答案: