将图标添加到CSS链接的标准方法是什么？

我习惯使用填充背景图像在链接旁边放置一个图标.

这种方法有很多例子.这是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怎么样：之前和之后？这是推荐的做法吗？

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

解决方法

我亲自填写它并通过CSS类放置背景图像(就像你的例子).它是迄今为止最轻的路线,它使文档保持轻盈和语义.

如果打印它们真的很重要(我的意思真的很重要)在那里粘贴一个真实的图像,但要注意它确实从语义方面搞砸了标记.

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

原文地址：https://www.jb51.cc/css/215071.html