HTMer » 编程开发 » 将超链接的下划线做成虚线的方法

将超链接的下划线做成虚线的方法

我们在浏览网页的时候,通常将鼠标移动文字超链接上时,在文字的下方会出现下划线,但这个下划线通常是实线,今天就教大家将超链接的下划线做成虚线的方法。

其实这样的效果,是先设置text-decoration:none,也就是去除了链接的下划线,然后再给链接加下边框线,设置下边框线不同的宽度、线型、颜色,就可以实现【下划线】变成多样效果。我们来看下面的代码:

a.text:hover {
text-decoration:none;
border-bottom:1px dashed #ccc;/*下边框线,1象素,虚线,颜色ccc*/
color:#c00;
}

a.text:hover {
border-bottom:1px solid #c00;/*下边框线,1象素,实线,颜色c00*/
color:#666;
}
顶一下 ▲()   踩一下 ▼()

相关文章