本教程的目标是在文本链接的后面跟上不同的图标，来更直观的提示这个链接的相关信息，如它指向的是一个word文档、PDF文件或者是电子邮件地址。需要说明一下的是，这里讲解的实现方法只支持IE7、 Firefox和Safari浏览器。

为链接添加图标提示 效果预览 [请选用支持的浏览器]

首先我们需要一些具有象征意义的精致GIF小图标，可以到网络上下载，有技术基础的话当然也可以自己设计。在本例中，所用的图标都是14×16 pix的规格，并且它们的背景都都是透明的：

实例A：指向PDF文件的链接

首先来看一下HTML代码：

这是很简单的链接标签，其浏览效果如下：

现在暂时没有任何的样式应用在上面，只是采用默认的链接形态区别于普通的文本。而且现在能告诉我们这个链接指向一个PDF文件的线索，就只有链接属性中的后缀名.pdf。不过现在我们可以通过IE7、Firefox和 Safari中一些新支持的CSS选择符来实现更直观的图标提示。

来看一下下面的CSS代码：

浏览器解析效果如下：

你可能会对其中的CSS选择符感到陌生，我们来解释一下。a[href $='.pdf']会在文档中搜索所有href以.pdf结束的链接标签，其中的美元符号$在这里就表示结尾的意思，而因为本例中链接的href为files/holidays.pdf，符合选择符的声明条件，所以CSS中的两条样式语句就会作用在这个链接上，首先在其右边空出18px的填充，然后在这个填充空间中定义背景图标：

实例B：邮件地址链接

先来看一下HTML代码：

然后应用下面的CSS样式：

注意CSS选择符中的^符号，实例A中要判断的是后缀名，所以使用的是美元符号$，但是在这里因为邮件连接的特征是mailto:前缀，所以要修改为相应的前缀判断符^：

实例C：新窗口链接

总所周知，我们要在新窗口中打开链接通常的做法是在链接属性中加target="_blank"，我们采用过渡型的DOCTYPE时没有问题，但是当我们使用严格的DOCTYPE时，这个方法将通不过W3C的校验。一个变通的方法就是首先在链接上应用一个class类或rel设置来标识它是一个新窗口链接，然后添加一些JS代码来实现打开新窗口的功能，具体的细节大家可以参考这篇来自网页设计师的文章。

综合上述原理，我们先来看一下HTML代码：

然后是CSS样式代码：

这里的CSS选择符是针对文档中所有应用了popup类的链接标签，还是使用设置填充和添加背景的方法实现图标提示：

远程下载：>>>本例图标及源文件下载<<< （5.73KB）

中国asp之家下载：Hypelink.rar （5.73 KB）

原文地址：Showing Hyperlink Cues with CSS

翻译整理：西米CC