从易用性和可访问性的角度分析，通过颜色之外的某些方式让链接区别于其他内容是很重要的。这是因为有视觉障碍的人很难区分对比不强烈的颜色，尤其是在文本比较小的情况下。例如，有色盲症的人无法区分具有相似亮度或饱和度的某些颜色。因此，网页设计时链接在默认情况下会加上下划线。
在网站建设时，下划线会让页面看上去比较乱。如果决定去掉链接的下划线，那么可以让链接显示为粗体。这样页面看起来没那么乱，而链接仍然醒目。
a:link, a:visited{
text-decoration:none;
font-weight:bold;}
当鼠标停留在链接上或激活链接时，可以重新应用下划线，从而增强其交互状态。a:hover, a:active{ text-decoration:underline;}也可以使用边框创建不太影响美观的下划线。
【示例】在下面示例中，取消默认的下划线，将它替换为不太刺眼的点线。当鼠标停留在链接上或激活链接时，这条线变成实线，从而为用户提供视觉反馈。
a:link, a:visited{
text-decoration: none;
border-bottom: 1px dotted #000;}a:hover,a:active{ border-bottom-style:solid;}
通过使用图像创建链接下划线，可以产生非常有意思的效果。例如，创建了一个非常简单的下划线图像，它由点线组成，可以使用以下代码将这个图像应用于链接。
a:link, a:visited{color:#f00;font-weight:bold;
text-decoration: none;
background:url(images/dashed1.gif) left bottom repeat-x;}
这种方式并不限于link和visited样式。在下面示例中，为hover和active状态创建了一个动画GIF，然后使用以下CSS应用它。
a:hover, a:active{ background-image:url(images/underline1-hovez.gif);
当鼠标停留在链接上或单击链接时，点线从左到右滚动出现，这就产生了一种有意思的效果。并非所有浏览器都支持背景图像动画，但是不支持这个特性的浏览器常常会显示动画的第一帧，这确保效果在老式浏览器中可以平稳退化。当然使用动画要小心，因为它会对某些用户造成可访问性问题。
在很多网站中，很难看出链接是指向网站中另一个页面，还是指向另一个站点。为了解决这个问题，在网页设计时，许多站点在新窗口中打开外部链接。但是，这不是好办法，最好的解决方案是让外部链接看起来不一样，让用户自己选择是离开当前站点，还是在新窗口或新的标签页中打开这个链接。
在制作网页时，可以在外部链接旁边加一个小图标，而且对于离站链接的图标已经出现了一种约定：一个框加一个箭头。实现这种效果最容易的方法是在所有外部链接上加一个类，然后将图标作为背景图像应用。
【示例】在下面的示例中，给链接设置少量的右填充，从而给图标留出空间，然后将图标作为背景图像应用于链接的右上角。
.external{ background：url(images/externalLink.gif) no-repeat right top;
padding-right:l0px;}
尽管这个方法是有效的，但是它不太优雅，因为必须手工地在每个外部链接上添加类。有办法让CSS判断链接是否是外部链接吗？实际上，确实有办法，这就是使用属性选择器。
属性选择器允许根据特定属性是否存在或属性值来寻找元素。CSS3扩展了它的功能，提供了子字符串匹配属性选择器。顾名思义，这些选择器允许通过对属性值的一部分和指定的文本进行匹配来寻找元素。CSS3还没有成为正式的规范，所以使用这些高级选择器可能会使代码失效。但是，许多符合标准的浏览器（如Firefox和Safad）已经支持这些CSS3选择器了，所以从最终规范中去掉它们的可能性是很小的。这种技术的工作方式是使用[att^=val]属性选择器寻找以文本http:开头的所有链接。
a[href^="http:"] { background: url(images/externalLink.gif) no-repeat right top;
padding-right: 10px;}
这应该会突出显示所有外部链接。但是也会选中使用绝对URL而不是相对URL的内部链接。为了避免这个问题，需要重新设置指向网站内部的所有链接，删除它们的外部链接图标。方法是匹配指向自己网站域名的链接，删除外部链接图标，重新设置右填充。
a[href^="http://www.yoursite.com"], a[href^="http://yoursite.com"]{ background-image:none;
padding-right: 0;}
大多数符合标准的浏览器都支持这种技术，而老式浏览器（如IE 6及更低版本）会忽略它。还可以扩展这种技术，如对邮件链接也进行突出显示。在下面的示例中，在所有mailto链接上添加一个小的邮件图标。
a[href^="mailto:"] { background: url(images/email.png) no-repeat right top;
padding-right: l0px;}
甚至可以突出显示非标准的协议，如用小的图标突出显示。
a[href^="aim:"] { background: url(images/im.png) no-repeat right top;
padding-right: l0px;}<a href="aim:goim?screenname=andybudd">链接内容</a>
突出显示可下载的文档和提要另一种不好的常见情况是，单击一个链接，本以为会进入另一个页面，却开始下载一个PDF或Word文档。幸运的是，CSS也可以帮助区分这些类型的链接。这要使用[att$=val]属性选择器，它寻找以特定值（如.pdf或.doc）结尾的属性。
a[href$=".pdf"] { background: url(images/PdfLink.gif) no-repeat right top;
padding-right: l0px;}a[href$=".doc"]{ background: url(images/wordLink.gif) no-repeat right top;
padding-right: l0px;}
采用与前面示例相似的方式，可以用不同的图标突出显示Word和PDF文档。这样访问者就知道它们是文档下载，而不是链接到另一个页面的链接。为了避免可能发生的混淆，读者还可以通过类似的方法用RSS图标突出显示链接的RSS提要。
a[href$=".rss"], a[href$=".rdf"] { background: url(images/feedLink.gif) no-repeat right top;
padding-right: l0px;}
通过提醒用户注意离站链接或可下载的文档，让他们明确地了解在单击链接时会发生的情况，避免了不必要的取消操作和烦恼。