linear gradient underline for hyperlink

Question

I would like to apply a linear gradient to my links. The code below works fine as long as the hyperlink's text stays on the same line. However when the text is splitted into several lines (ie: because the browser width is small), only the last line of the hyperlink has an underline.

Does anyone know how I could fix it? Or if I'm using the right approach to achieve this?

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

user_6434794 · Answer

CSS

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

HTML

linear gradient underline for hyperlink

2 Answers