css实现下划线与文字不同颜色
通过CSS的设计，可以达到下划线和文字的颜色不一样的哦，这个主要用在链接文字上。
实现的方法有3种。一种是通过样式的嵌套，一种是通过下边框假冒下划线，最后一种就是用背景图片了。
[color=darkred]第一种：[/color]
[code]
<style>
.icool{
COLOR: green;
}
a{text-decoration:none}
A:hover
{
COLOR: red;
TEXT-DECORATION: underline
}
</style>
<a href=http://blog.imoso.net ><font class=icool >实现下划线与文字不同颜色</font></a>
[/code]
注意<a href=http://blog.imoso.net ><font class=icool >实现下划线与文字不同颜色</font></a>的书写格式！！
明显，这种方法比较麻烦。
[color=red]第二种是通过下边框假冒下划线:[/color]
[code]
<style>
a { color green; text-decoration:none; padding:0px; }
a:hover { border-bottom:1px solid red; }
</style>
<a href="http://blog.imoso.net/";>实现下划线与文字不同颜色</a>
[/code]
这个方法实在是太妙了。但是也有一点点缺陷：但文字为英文或数字时，这个假冒的下划线明显离文字太远了（可能很多非中文的可能会出现这个问题）
[color=darkred]第三种就是用背景图片啦[/color]，这个可以做到很多变化，因为我们可以用上各种线条图片。缺点就是当链接多了，在读取图片的时候可能会比较消耗资源，慢一些。:
[code]
<style>
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;
}
</style>
<a href="blog.imoso.net">实现下划线与文字不同颜色</a>
[/code]