title: ::after pseudo element overflowing element, using overflow:hidden; has extra space
body: <p>I am trying to make a button with a hover effect and <code>::after</code> pseudo class is involved.</p>
  <p>The <code>::after</code> pseudo-class covers 100% of the button's height and width, even more just to be sure; then when <code>:hover</code>, the <code>::after</code> element's width will shrink to 0.</p>
  <p>My problem is that I can't precisely size the <code>::after</code> element, so I simply added <code>overflow: hidden;</code> to the button so that it will cut out the overflowing parts of the <code>::after</code> pseudo-element. But it cropped a little too much, leaving one pixel between the border  and the <code>::after</code> pseudo-element covering the button.</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>.btn {
    font-family: inherit;
    background-color: transparent;
    text-decoration: none;
    padding: 1rem 1.5rem;
    font-size: 2.3rem;
    color: #fff;
    border: solid 3px #EF9C43;
    width: 50%;
    border-radius: 100rem;
    text-transform: uppercase;
    font-weight: 400;
    transition: color 0.3s, transform 0.3s, box-shadow 0.3s;
    position: relative;
    box-shadow: 1rem 1rem 4rem rgba(31, 31, 31, 0.5);
    z-index: 5;
    backface-visibility: hidden;
    overflow: hidden;
  }
  
  .btn::after {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    background-color: #EF9C43;
    width: 110%;
    height: 110%;
    z-index: -1;
    transition: width 0.3s;
  }
  
  .btn:hover {
    font-weight: 600;
    color: #1f1f1f;
    transform: translateY(-0.3rem);
    box-shadow: 1rem 1.5rem 2rem rgba(31, 31, 31, 0.6);
  }
  
  .btn:active {
    transform: translateY(-0.1rem);
    box-shadow: 1rem 1.25rem 2.5rem rgba(31, 31, 31, 0.5);
  }
  
  .btn:hover::after {
    width: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button class="btn btn--orange"&gt;Hire our services&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Here is the codepen of my case: <a href="https://codepen.io/CoolBoiDave/pen/bGLdwxE" rel="nofollow noreferrer">https://codepen.io/CoolBoiDave/pen/bGLdwxE</a></p>
  <p>Any help would be appreciated! (PS: sorry for bad english)</p>