CSS下划线与文字间距，下划线粗细以及下划线颜色的设置

最开始的时候了解下划线的属性是：

text-decoration:underline;

• 1

但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用这个标签也是同样的效果。

例子：

    
    
    



    

        用text-underline 属性设置下划线
    
    

        用<u>标签设置下划线
    

效果图： 

后来在多次测试中，发现可以很方便解决问题，span使用padding-bottom和border-bottom不会影响整体的布局。

在文字外加上span标签，再给span标签设置padding-bottom和border-bottom属性的值，padding-bottom可以很方便调整下划线与文字的间距，比如padding-bottom: 5px,下划线的颜色与粗细用border-bottom就可以改变，比如：border-bottom: 2px solid #f89,如下：

span {
    padding-bottom: 5px;
    border-bottom: 2px solid #f89;
}

利用这种方法，发现下面这种下划线很容易制作下划线，简单例子：

完整代码：

    
    
    



    

        

            
套装模板
            
标题
            
图片
            
背景图
            
卡片
            
分割线
            
关注和原文
            
名片
            
其他
            
贴纸
            
布局
            
零件
         

        
    

效果图： 

通过span设置下划线的关键代码：

.nav a.active>span ,  .nav a:hover>span {
    padding-bottom: 5px;
    border-bottom:  2px solid #fff;
}

改变下划线间距和颜色，也不影响整体布局：

.nav a.active>span, .nav a:hover>span {
    padding-bottom: 9px;
    border-bottom: 2px solid #48C2F9;
}

完整代码：

    
    
    



    

        

            
套装模板
            
标题
            
图片
            
背景图
            
卡片
            
分割线
            
关注和原文
            
名片
            
其他
            
贴纸
            
布局
            
零件
         

        
    

《CSS揭秘》中也有一些下划线自定义的方法： 
（1）用border-bottom

a[href]{
    border-bottom: 1px solid gray;
    text-decoration: none;
}

（2）用display:inline和line-height一起来调整与文本得间隙

display: inline-block;
border-bottom: 1px solid gray;
line-height: .9;

（3）还可以用box-shadow来模拟下划线

box-shadow: 0 -1px gray inset;

例子：

    
    
    


    

        
            用border-bottom 来自定义下划线
        
    
    

        
            用display:inline-block 和 line-height 调整下划线间距
        
    
    

        
            用box-shadow 模拟下划线
        
    

效果如下： 

其他资源：(下面这两个网址测试时发现在火狐可以，谷歌不行) 
(1)http://dabblet.com/gist/58f3d67d5bb0f8338776 

(2)http://dabblet.com/gist/c9184f634e9e9efde6e8

转载自：http://blog.csdn.net/ann295258232/article/details/52691369