css的下划线颜色,css中问题，怎样下划线和字的颜色不一样？

满意答案

t5Xw0Dkl

2013.05.23

采纳率：44%    等级：12

已帮助：14569人

第一种：

.icool{

COLOR: green;

}

a{text-decoration:none}

A:hover

{

COLOR: red;

TEXT-DECORATION: underline

}

实现下划线与文字不同颜色

注意实现下划线与文字不同颜色的书写格式！！

明显，这种方法比较麻烦。第二种是通过下边框假冒下划线

a { color green; text-decoration:none; padding:0px; }

a:hover { border-bottom:1px solid red; }

实现下划线与文字不同颜色

这个方法实在是太妙了。但是也有一点点缺陷：但文字为英文或数字时，这个假冒的下划线明显离文字太远了(可能很多非中文的可能会出现这个问题)第三种就是用背景图片啦，这个可以做到很多变化，因为我们可以用上各种线条图片。缺点就是当链接多了，在读取图片的时候可能会比较消耗资源，慢一些。

a{text-decoration: none;}

a:hover{

color:red;

background: url('http://tech.tom.com/images/computer/2004/02/04/diagonal.gif') repeat-x 100% 100%;

white-space: nowrap;

padding-bottom:-1px;

}

实现下划线与文字不同颜色

00分享举报