title: Using :after and :hover:after button in IE11
body: <p>I have a button which is animated using :after and :hover:after CSS. Tried numerous ways to get it to work in IE but cannot find a work around. May be because the empty content:"", or the transition, but even without the transition is doesn't work. Any help / explanations is greatly appreciated.</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>button.bttnStyle1 {
    background: none;
    border: none;
    font-size: 14rem;
    text-transform: uppercase;
    position: relative;
    padding: 0rem;
    cursor: pointer;
  }
  
  button.bttnStyle1:after,
  button.bttnStyle1::after {
    display: block;
    position: absolute;
    left: 0;
    bottom: -5rem;
    width: 3rem;
    height: 3rem;
    border-radius: 3rem;
    content: "";
    -o-transition: width 0.4s ease, height 2s ease-out;
    -moz-transition: width 0.4s ease, height 2s ease-out;
    -webkit-transition: width 0.4s ease, height 2s ease-out;
    transition: width 0.4s ease, height 2s ease-out;
  }
  
  button.bttnStyle1:hover {}
  
  button.bttnStyle1:hover:after,
  button.bttnStyle1:hover::after {
    width: 100%;
    height: 2rem;
    -o-transition: width 0.4s ease, height 2s ease-out;
    -moz-transition: width 0.4s ease, height 2s ease-out;
    -webkit-transition: width 0.4s ease, height 2s ease-out;
    transition: width 0.4s ease, height 0.2s ease;
  }
  
  button.bttnStyle1:focus {
    outline: none;
  }
  
  button.bttnColorGreen {
    color: #69e0b1;
  }
  
  button.bttnColorGreen:after{
   background-color:#69e0b1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button type="button" class="bttnStyle1 bttnColorGreen"&gt;BUTTON&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://codepen.io/benneb10/pen/pjRMqj?editors=110" rel="nofollow">Codepen</a></p>