title: linear gradient bottom border on hover
body: <p>I'm trying to apply <code>linear-gradient</code> to <code>border-bottom</code> on <code>hover</code> to an <code>&lt;a&gt;</code> but it didn't work 100% My aim is to make this with <em>HTML</em> and <em>CSS</em> only if possible.</p>
  
  <p>Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    font-size: 30px;
    text-decoration: none;
    color: #666;
    cursor: pointer;
    padding-right: 3%;
    padding-bottom: 3%;
    position: relative;
    display: inline-block;
  }
  a:after {
    content: '';
    position: absolute;
    left: -50%;
    right: 0%;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-image: -webkit-linear-gradient(left, #f0f0f0, #0a389b, #f0f0f0);
    border-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    border-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    border-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
    transition: all 0.5s linear;
    bottom: 0;
    opacity: 0;
  }
  a:hover:after {
    border-right: 25vh;
    right: 0%;
    opacity: 1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;a href="#"&gt;First&lt;/a&gt; 
    &lt;a href="#"&gt;Second&lt;/a&gt; 
    &lt;a href="#"&gt;This is the third&lt;/a&gt; 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see the <code>border-bottom</code> is not in the <code>center</code> and is not suitable for the <code>width</code> of the <code>&lt;a&gt;</code> <code>width</code>.</p>