超链接是网页中，必不可少的内容。超链接的交互设计，也是一个网页中最重要的细节。CSS 也为链接准备了几个伪类选择器，用来设置超链接的交互操作。但是在绝大多数网站中，我们看到的超链接交互样式，通常是：改变一下链接的颜色、取消或者增加下划线、点击链接文本变色或者下划线消失等等。但实际上，超链接的交互设计，并非只能这么简单。

很久没有登录 W3C 的官方网站，今天上去看了一下，从第一眼就看到了他们的超练级的与众不同。把鼠标放上，点击，测试了一下他们的超链接交互设计，感觉非常不错，就稍微思考了一下这个设计是如何实现的。稍微思考一下之后，才发现实现这个效果非常的容易，而且兼容性较好。下面就来介绍一下。

先来看一下他们的效果图片，当然，我更推荐直接去 W3C 官方网站看效果。

实现原理和分析

首先，仍然是常规的超链接样式，带一条下划线，但是与普通的超链接样式不同的是，这条下划线要粗（2px 普通的 1px），同时这个下划线和文字颜色不同（用 color 和 text-decoration 定义的超链接下划线颜色是和文本相同的）。所以可以肯定，这个下划线是使用 border-bottom 属性定义的，并且 padding-bottom 了几个像素，空开一定距离。然后交互性操作就很简单了，只需要改变一下底边框的颜色就可以了。当点击事件发生的时候，超链接不是简单的改变了颜色，而是向下移动了几个像素，这样给人的错觉就是按下去了一样，这种用户体验是传统超链接仅仅变换颜色所体验不到的。关于这个的实现，需要使用 position 的 relative 属性，激活 top 属性，即可让超链接脱离原来位置向下偏移一定距离。

既然原理分析完毕，那么我们就开始写出相应代码吧。

HTML 结构

随便输入一些字，加上个链接就OK了。

代码不换行代码换行

 

这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。这里是 潜行者m 随便打的一些字，用来做链接交互样式的演示，链接在这里。

 

CSS 样式

代码不换行代码换行

div{width:300px;margin:20px auto;line-height:24px;}

div a{text-decoration:none;color：#000;padding-bottom:1px;}

div a:link，div a:visited{border-bottom:2px solid #f00;}

div a:hover{border-bottom:2px solid #00f;}

div a:active{border-bottom:2px solid #00f;outline:0 none;position:relative;top:1px;}

对 div 的宽度定义只是为了好看而已，对行高的定义，是为了不让下划线影响到下一行文字，这个可以自己决定。然后先对 a 标签取消默认的下划线和颜色，再就是交互性的操作。注意，对 ：active 使用了 outline 属性，防止有些浏览器在点击超链接的时候，超链接会出现边框。

发散思维