最开始的时候了解下划线的属性是：
text-decoration:underline; 但是，很遗憾的是，对于设计做的下划线用浏览器默认属性样式很难调整，使用这个属性并不能调整下划线与文字的间距，而且对于下划线的颜色也不好调整，而使用这个标签也是同样的效果。
例子：
默认下划线
用标签设置下划线
后来在多次测试中，发现套文字可以在文字下方通过边框属性border-bottom出现下划线，使用padding-bottom调整下划线距离文字的间距，不会影响整体的布局，很方便解决问题。
在文字外加上span标签，再给span标签设置padding-bottom和border-bottom属性的值，padding-bottom可以很方便调整下划线与文字的间距，比如padding-bottom: 5px,下划线的颜色与粗细用border-bottom就可以改变，比如：border-bottom: 2px solid #f89,核心代码如下：
html部分：
套装模板 css部分： span { padding-bottom: 5px; border-bottom: 2px solid #f89; } 利用这种方法，发现下面这种下划线很容易制作下划线，简单例子：
完整代码：
用span制作下划线
通过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; } 
完整代码：
用span制作下划线
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; 例子：
《CSS揭秘》自定义下划线
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/220110.html原文链接：https://javaforall.net
