我们在浏览网页的时候,通常将鼠标移动文字超链接上时,在文字的下方会出现下划线,但这个下划线通常是实线,今天就教大家将超链接的下划线做成虚线的方法。
其实这样的效果,是先设置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; }