使用CSS向链接添加图标的标准方法是什么？

Question

我习惯使用padding+ background-image在链接旁边放置一个图标.

这种方法有很多例子.这是从这里来的一个:

 <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;  
 }    

但大多数浏览器都不打印背景图片,这很烦人.

在链接旁边放置图标的标准是什么,这些标准在语义上是正确的并适用于所有情况？

---

编辑

CSS :before和:after？这是推荐的做法吗？

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

Answer 1

我会亲自填充它并通过 CSS 类放置背景图像（就像你的示例一样）。这是迄今为止最轻量的路线，它使文档保持简洁和语义。

如果打印它们真的很重要（我的意思是真的很重要），请将真实图像粘贴在那里，但请注意，它确实会从语义方面搞砸标记。

也许更好的折衷解决方案是有一个“可打印版本”，它使用图像来代替（通过服务器大小的东西或一些用实际图像替换CSS类的JS。