Question

I’m used to use padding + background-image to place an icon next to a link.

There are many example of this approach. Here is one from here:

 <a class="external" href="http://www.othersite.com/">link</a>

  a.external {  
     padding-right: 15px;  
     background: transparent url(images/external-link-icon.gif) no-repeat top right;  
 }    

But most browser don’t print background image, which is annoying.

What is the standard to place icon next to links which is semantically correct and works in all cases?

---

EDIT

What about CSS :before and :after? Is it a recommended practice?

a.test:after {
    padding-right: 5px;
    content: url(../pix/logo_ppk.gif);
}

Answer 1

I’d personally pad it and put a background image via a CSS class (just like your example). It’s by far the lightest route, it keeps the document light and semantic.

If printing them really matters (and I do mean really matters) stick a real image in there but be aware that it does screw up markup from a semantic aspect.

Perhaps a better compromise solution would be to have a “printable version” which uses images instead (either by something server-size or some JS that replaces the CSS class with an actual image.