title: CSS Animation Line Grow on Hover
body: <p>I have a button that needs animation when hovered. The image below shows the word "Read More" i would like for the yellow line to the right to expand to about %50 more than its current size on hover. </p>
  
  <p><img src="https://i.stack.imgur.com/CbOwv.png" alt=""></p>
  
  <pre><code>&lt;a href="#" class="read_more"&gt;Read More &lt;/a&gt; .read_more { font-family: "Gotham SSm A", "Gotham SSm B"; font-size: 20px; color: #002c77; letter-spacing: 0; text-align: center; line-height: 28px; font-weight: bold; text-transform: uppercase; } .read_more::after { content: "\2014"; color: #fcd450; }
  </code></pre>