title: Add content to an anchor link on hover with transition
body: <p>I would like to know how i can archive that an icon appears on hovering a anchor link on the page.</p>
  
  <p>I started a little snippet which I thought might do my expected behavior, but instead it leaves a gap. The text should extend (grow) on size as you hover over the anchor.</p>
  
  <p>How can I archive this?</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>a:after {
      content:" ";
      position: relative;
      opacity: 0;
      left: -20px;
      -webkit-transition: all 250ms;
      transition: all 250ms;
  }
  a:hover:after {
      opacity: 1;
      left: 0px;
      -webkit-transition: all 250ms;
      transition: all 250ms;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p&gt;This is a &lt;a href='http://stackoverflow.com'&gt;Test&lt;/a&gt;. And I would like to link you on &lt;a href='http://stackoverflow.com'&gt;Stackoverflow&lt;/a&gt; if you have any questions.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>