title: Animate hr tags entry and exit on hover
body: <p>I am trying to animate hr tag in an anchor tag. Basically what I want is on hover over the anchor tag the hr tag should slide out to the right and on moving out the mouse, the hr tag should slide in from the left.</p>
  
  <p>What I have done till now is on hover the hr tag slides out to the left instead to the right and on moving out the mouse it slides back in from the left.</p>
  
  <p>I want to achieve something like the following:<br>
  <a href="https://i.stack.imgur.com/kLNu6.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kLNu6.gif" alt="enter image description here"></a></p>
  
  <p><strong>Button Component</strong>  </p>
  
  <pre><code>&lt;Fragment&gt;
      &lt;Link className="btn" to={ this.props.linkTo }&gt;
          &lt;div&gt;
              &lt;span&gt;{ this.props.text }&lt;/span&gt;
              &lt;hr/&gt;
          &lt;/div&gt;
      &lt;/Link&gt;
  &lt;/Fragment&gt;
  </code></pre>
  
  <p><strong>CSS</strong>  </p>
  
  <pre><code>.btn {
      color: var(--black);
      text-decoration: none;
      display: flex;
  }
  .btn &gt; div &gt; span {
      line-height: 30px;
  }
  .btn &gt; div &gt; hr {
      margin: 0;
      border: 0;
      border-top: 2px solid var(--black);
      width: 100%;
      transition: width 0.2s ease-out;
  }
  .btn:hover div &gt; hr {
      width: 0;
  }
  </code></pre>