title: CSS transform scalex line unconsistant height
body: <p>I have a hover animation on a link. A line is drawn below the text. It's 2px in height. the problem is that it starts with one height and continues with another height.</p>
  
  <ul>
  <li>Why is it doing that? It does not need to calculate anything because 2px is a fixed number.</li>
  <li>How can I get around it?</li>
  </ul>
  
  <p>The animated GIF is taken in Chrome.</p>
  
  <p><a href="https://i.stack.imgur.com/VhHyn.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VhHyn.gif" alt="enter image description here"></a></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 {
    --cp-500: #c53e3a;
    --cp-700: #8d1d2d;
    --cp-800: #721228;
  }
  
  .action a {
    background: linear-gradient(45deg, var(--cp-500), var(--cp-800));
    color: #fff;
    border-radius: 100vh;
    padding: .5rem 2rem;
    display: inline-block;
    border: 1px solid var(--cp-700);
    transition: box-shadow 150ms ease-in;
    box-shadow: 0 1.25rem 1rem -1rem var(--cp-800);
    z-index: 1;
    text-decoration: none;
    position: relative;
   }
  
  .action a:hover {
    box-shadow: 0 1rem 1rem -1rem var(--cp-800);
    background: var(--cp-700);
  }
  
  .action a:before {
    content: '';
    position: absolute;
    bottom: .5rem;
    left: 2rem;
    width: calc(100% - 4rem);
    height: 2px;
    background: var(--cp-500);
    transform: scaleX(0);
    transform-origin: top right;
    transition: transform 1000ms ease-in;
    z-index: -1;
  }
  
  .action a:hover:before {
    transform-origin: top left;
    transform: scaleX(1);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="action"&gt;
     &lt;a href="#"&gt;Test&lt;/a&gt;
   &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>