title: Underline from left to right on hover in and out
body: <p>With the following code I get an hover underline effect from left to right. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.underline {
    display: inline;
    position: relative;
    overflow: hidden;
  }
  .underline:after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: -5px;
    background: #000;
    height: 4px;
    transition-property: left right;
    transition-duration: 0.3s;
    transition-timing-function: ease-out;
  }
  .underline:hover:after,
  .underline:focus:after,
  .underline:active:after {
    right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;hello, link is &lt;a href="#" class="underline"&gt;underline&lt;/a&gt;
  &lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When you're not in hover, the :after element returns to the left, the initial state. Is there any way that the <strong>:after goes to the right</strong> and not to the left when you leave the hover?</p>