title: Hover effect on button using :after element - Animate out when mouse is out of button dimensions
body: <p>I have this button animation defined: <a href="https://jsfiddle.net/jonaspraem/pcwudrmc/74081/" rel="nofollow noreferrer">JSFIDDLE</a></p>
  
  <p>The code is also included here: </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;button&gt;Hover to change color&lt;/button&gt;
  </code></pre>
  
  <p>SCSS</p>
  
  <pre><code>$blue: #0084ff;
  $blue-darker: darken($blue, 5);
  
  @keyframes mymove {
      0% {width: 0%}
      100%  {width: 80%}
  }
  
  body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  button {
    margin: auto;
    background-color: $blue;
    border: 1px solid $blue;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
    cursor: pointer;
    position: relative;
     &amp;:hover {
      &amp;:after {
        content: "";
        position: absolute;
        bottom: 3px;
        width: 80%;
        height: 2px;
        background-color: white;
        left: 0;
        right: 0;
        margin: auto;
        animation-name: mymove;
        animation-duration: .5s;
       }
    }
  }
  </code></pre>
  
  <p>It's a simple hover animation. The issue is when the mouse leaves the button, the :after element just disappears. I want to animate the :after element out when the mouse leaves? - How would you do that? </p>
  
  <p>Should I modify the keyframe to also contain the opposite direction? 100% to 0% ? or something completely else?</p>
  
  <p>EDIT:</p>
  
  <p>Difference from <a href="https://stackoverflow.com/questions/16516793/how-to-reverse-an-animation-on-mouse-out-after-hover">this question</a> is that I need to access the after element from the button. I have tried with this: </p>
  
  <pre><code>@keyframes mymove-out {
      from {&amp;:after {
        width: 80%
        }}
      to  {&amp;:after {
        width: 0
      }}
  }
  </code></pre>
  
  <p>And using it on the button</p>
  
  <pre><code>animation: mymove-out .5s ease;
  </code></pre>
  
  <p>But this doesn't work. How do I access the after element from a keyframe?</p>