原文地址：Showing Hyperlink Cues with CSS
翻译整理：西米CC – WordPress外贸建站 | WordPress企业建站
[请选用支持的浏览器:IE7 Firefox Safari …]
本教程的目标是在文本链接的后面跟上不同的图标，来更直观的提示这个链接的相关信息，如它指向的是一个word文档、PDF文件或者是电子邮件地址。需要说明一下的是，这里讲解的实现方法只支持IE7、 Firefox和Safari浏览器。
首先我们需要一些具有象征意义的精致GIF小图标，可以到网络上下载，有技术基础的话当然也可以自己设计。在本例中，所用的图标都是14×16 pix的规格，并且它们的背景都都是透明的：
实例A：指向PDF文件的链接
首先来看一下HTML代码：
这是很简单的链接标签，其浏览效果如下：
现在暂时没有任何的样式应用在上面，只是采用默认的链接形态区别于普通的文本。而且现在能告诉我们这个链接指向一个PDF文件的线索，就只有链接属性中的后缀名.pdf。不过现在我们可以通过IE7、Firefox和 Safari中一些新支持的CSS选择符来实现更直观的图标提示。
来看一下下面的CSS代码：
a[href $='.pdf'] {
padding-right: 18px;
background: transparent url(Hyperlink/icon_pdf.gif) no-repeat center right;
}
浏览器解析效果如下：
你可能会对其中的CSS选择符感到陌生，我们来解释一下。a[href $='.pdf']会在文档中搜索所有href以.pdf结束的链接标签，其中的美元符号$在这里就表示结尾的意思，而因为本例中链接的href为files/holidays.pdf，符合选择符的声明条件，所以CSS中的两条样式语句就会作用在这个链接上，首先在其右边空出18px的填充，然后在这个填充空间中定义背景图标：
实例B：邮件地址链接
先来看一下HTML代码：
然后应用下面的CSS样式：
a[href ^="mailto:"] {
padding-right: 20px;
background: transparent url(Hyperlink/icon_mailto.gif) no-repeat center right;
}
注意CSS选择符中的^符号，实例A中要判断的是后缀名，所以使用的是美元符号$，但是在这里因为邮件连接的特征是mailto:前缀，所以要修改为相应的前缀判断符^：
实例C：新窗口链接
总所周知，我们要在新窗口中打开链接通常的做法是在链接属性中加target=”_blank”，我们采用过渡型的DOCTYPE时没有问题，但是当我们使用严格的DOCTYPE时，这个方法将通不过W3C的校验。一个变通的方法就是首先在链接上应用一个class类或rel设置来标识它是一个新窗口链接，然后添加一些JS代码来实现打开新窗口的功能，具体的细节大家可以参考这篇来自网页设计师的文章。
综合上述原理，我们先来看一下HTML代码：
然后是CSS样式代码：
a[class ="popup"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}
这里的CSS选择符是针对文档中所有应用了popup类的链接标签，还是使用设置填充和添加背景的方法实现图标提示：
