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

Question

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

有很多这种方法的例子。这是来自 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;  
 }    

但是大多数浏览器不打印背景图片，这很烦人。

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

---

编辑

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

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

Answer 1

我会亲自填充它并通过 CSS 类放置背景图片(就像您的示例一样)。这是迄今为止最轻的路线，它使文档保持轻便和语义化。

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

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