title: What is the standard way to add an icon to a link with CSS?
body: <p>I'm used to use <code>padding</code> + <code>background-image</code> to place an icon next to a link. </p>
  
  <p>There are many example of this approach. Here is one from <a href="http://www.fivefingercoding.com/xhtml-and-css/how-to-add-an-external-link-icon" rel="noreferrer">here</a>:</p>
  
  <pre><code> &lt;a class="external" href="http://www.othersite.com/"&gt;link&lt;/a&gt;
  
    a.external {  
       padding-right: 15px;  
       background: transparent url(images/external-link-icon.gif) no-repeat top right;  
   }    
  </code></pre>
  
  <p>But most browser don't print background image, which is annoying. </p>
  
  <p>What is <em>the</em> standard to place icon next to links which is semantically correct and works in all cases?</p>
  
  <hr>
  
  <p><strong>EDIT</strong></p>
  
  <p>What about CSS <code>:before</code> and <code>:after</code>? Is it a recommended practice?</p>
  
  <pre><code>a.test:after {
      padding-right: 5px;
      content: url(../pix/logo_ppk.gif);
  }
  </code></pre>