[分享]css下划线选中状态

CSS下划线在网页布局中是非常常见的一种样式，尤其是在选中状态下。下面这段代码展示了如何在CSS中为选中状态添加下划线：a:link { / 未访问的链接 / textdecoration: none...

CSS下划线在网页布局中是非常常见的一种样式，尤其是在选中状态下。下面这段代码展示了如何在CSS中为选中状态添加下划线：

a:link { /* 未访问的链接 */
  text-decoration: none; /* 去除下划线 */
}
a:visited { /* 已访问的链接 */
  text-decoration: none; /* 去除下划线 */
}
a:hover { /* 鼠标悬停在链接上 */
  text-decoration: underline; /* 添加下划线 */
}
a:active { /* 选中状态 */
  text-decoration: underline; /* 添加下划线 */
} 

如你所见，给选中状态下的链接添加下划线只需要在CSS中为a:active选择器添加text-decoration:underline属性即可。同样的，鼠标悬停在链接上时也会显示下划线，只不过这个时候是用a:hover选择器来实现的。而为了避免干扰，为未访问的链接和已访问的链接都加上了text-decoration:none属性，这样就可以保证其它状态下不会有下划线。