title: CSS hover effect. The border of the element is not covered
body: <p>The first button is without the hover effect and it looks good, however in the second one with the hover effect, there is some small space not covered because of the border. Any idea what causes that?</p>
  <p><a href="https://i.stack.imgur.com/KEfHC.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KEfHC.jpg" alt="enter image description here" /></a></p>
  <p>Here's the code I wrote:</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>:root {
    font-size: 1em;
    box-sizing: border-box;
  }
  
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  
  body {
    margin: 0;
    padding: 0;
  }
  
  a {
    text-decoration: none;
  }
  
  .container {
    padding: 2em;
  }
  
  .button {
    position: relative;
    display: inline-block;
    text-transform: uppercase;
    font-size: 1.1rem;
    font-weight: 800;
    color: #fff;
    background: #038C7E;
    padding: .85em 1.25em;
    letter-spacing: .05em;
    box-shadow: 4px 3px 8px 0 rgba(0, 0, 0, .25);
    border-radius: .35em;
    border-width: 0 0 .1875em 0;
    border-style: none none solid none;
    border-color: transparent transparent rgba(0, 0, 0, .25) transparent;
  }
  
  .button::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: .2;
    background: #000;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: 50%;
    transition: transform ease-in-out .3s;
  }
  
  .button:hover::before {
    transform: scaleX(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en-US"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;link rel="stylesheet" href="button-hover-shutterout.css"&gt;
    &lt;title&gt;Button Hover Shutterout&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;a class="button" href="#" role="button"&gt;Learn More&lt;/a&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>