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

Answer 1

I think the easiest way would be to use background-image. This will require some adjustments but it should get you started:

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;

}