css超链接下划线

css超链接下划线往下隔开一段距离的两种实现方法

css underline style  without text-decoration

经常使用的超链接的CSS样式，带下划线通常采用”text-decoration:underline” 普通情况下，很好用，但是当字体加粗或者对h1~h3比较大的字体加下划线时，会发现下划线与超链接连在一起，很不雅观。于是便有了将超链接下划线与文本链接往下隔开一段距离的要求。这里采用的是用首先设置text-decoration:none，然后设置border-bottom,只需设置为solid 即可，最后padding-bottom往下隔开一段像素距离如3px，可以完美实现将下划线往下隔开一段距离的要求。

a.cls-underline-1{

text-decoration:none;

border-bottom:solid /*设置为solid就可以了*/

padding-bottom:3px; /*设置下方隔开距离此处为3像素*/
}

Examples:
css underline style
css underline style
css underline style
css underline style

当然，还有一种方式更为简单一些，就是直接设置一个图片作为超链接的背景，背景图片里定制好下划线的位置。也可以采用background-position来辅助调整一下。采用此种方式，可以通过替换背景图片为动态的gif图片制作更炫的效果，而且图片的下划线可以制作的更丰富一些。

a.cls-underline-2{

text-decoration:none;

background:url(alink-background.jpg);

background-position: left+px top+px;/*当背景图片设计的不够好时，可以采用此设置来调整位置*/

pading-bottom:3px;/*设置下方隔开距离此处为3像素*/

}
Examples:
css underline style