title: linear gradient underline for hyperlink
body: <p>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.</p>
  
  <p>Does anyone know how I could fix it? Or if I'm using the right approach to achieve this?</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p><a href="https://codepen.io/mchrbn/pen/XROgbw" rel="nofollow noreferrer">You can test it on this CodePen sketch</a></p>