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

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

text-decoration:underline;

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

例子：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>默认下划线</title><style>.test-underline {text-decoration: underline;}</style>
</head>
<body><p><a class="test-underline">用text-underline 属性设置下划线</a></p><p><u>用&lt;u&gt;标签设置下划线</u></p></body>
</html>

效果图：

后来在多次测试中，发现<span></span>套文字可以在文字下方通过边框属性border-bottom出现下划线，使用padding-bottom调整下划线距离文字的间距，不会影响整体的布局，很方便解决问题。

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

html部分：
<span>套装模板</span>css部分：
span {padding-bottom: 5px;border-bottom: 2px solid #f89;
}

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

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用span制作下划线</title><style>body {padding: 0;margin: 0;font-family: "Microsoft Yahei";}ul {list-style: none;padding-left: 0;margin: 0;}/*清除浮动*/.clearfix {*zoom: 1;}.clearfix:before,.clearfix:after {display: table;line-height: 0;content:  "";          }.clearfox:after {clear: both;}.nav {width: 600px;}.nav li {float:left;         }.nav a {box-sizing: border-box;display: inline-block;text-align: center;width: 100px;height: 50px;color: #fff;padding: 12px 5px;background: #424a58;text-decoration: none;cursor: pointer;}.nav a.active>span ,  .nav a:hover>span {/*关键代码*/padding-bottom: 5px;border-bottom:  2px solid #fff;}</style></head>
<body><div><ul class="nav clearfix"><li><a class="active"><span>套装模板</span></a></li><li><a><span>标题</span></a></li><li><a><span>图片</span></a></li><li><a><span>背景图</span></a></li><li><a><span>卡片</span></a></li><li><a><span>分割线</span></a></li><li><a><span>关注和原文</span></a></li><li><a><span>名片</span></a></li><li><a><span>其他</span></a></li><li><a><span>贴纸</span></a></li><li><a><span>布局</span></a></li><li><a><span>零件</span></a></li>          </ul></div>
</body>
</html>

效果图：

通过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;
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>用span制作下划线</title><style>body {padding: 0;margin: 0;font-family: "Microsoft Yahei";}ul {list-style: none;padding-left: 0;margin: 0;}/*清除浮动*/.clearfix {*zoom: 1;}.clearfix:before,.clearfix:after {display: table;line-height: 0;content:  "";          }.clearfox:after {clear: both;}.nav {width: 600px;}.nav li {float:left;         }.nav a {box-sizing: border-box;display: inline-block;text-align: center;width: 100px;height: 50px;color: #fff;padding: 12px 5px;background: #424a58;text-decoration: none;cursor: pointer;}.nav a.active>span ,  .nav a:hover>span {padding-bottom: 8px;border-bottom:  2px solid #fff;}</style></head>
<body><div><ul class="nav clearfix"><li><a class="active"><span>套装模板</span></a></li><li><a><span>标题</span></a></li><li><a><span>图片</span></a></li><li><a><span>背景图</span></a></li><li><a><span>卡片</span></a></li><li><a><span>分割线</span></a></li><li><a><span>关注和原文</span></a></li><li><a><span>名片</span></a></li><li><a><span>其他</span></a></li><li><a><span>贴纸</span></a></li><li><a><span>布局</span></a></li><li><a><span>零件</span></a></li>          </ul></div>
</body>
</html>

《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;

例子：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>《CSS揭秘》自定义下划线</title><style>body {font-family: "Microsoft Yahei";}a {text-decoration: none;color: #000;}.underline1 {border-bottom: 1px solid gray;}.underline2 {display: inline-block;border-bottom: 1px solid gray;line-height: .9;}.underline3 {box-shadow: 0 -1px gray inset;}</style>
</head>
<body><p><a class="underline1" href="#">用border-bottom 来自定义下划线</a></p><p><a class="underline2">用display:inline-block 和 line-height 调整下划线间距</a></p><p><a class="underline3">用box-shadow 模拟下划线</a></p>
</body>
</html>

效果如下：

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

【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置相关推荐

html字体下划线下移,CSS下划线与文字间距距离设置(CSS文字下划线距离设置)
CSS设置下划线与文字间距距离(CSS文字下划线距离设置) css下划线与文字上下距离设置,文字字体下划线样式技巧篇,如何改变文字与下划线距离间距?这里CSS5为大家介绍通过下边框border-bot ...
CSS下划线与文字间距，下划线粗细以及下划线颜色的设置
最开始的时候了解下划线的属性是: text-decoration:underline; 1 但是,很遗憾的是,对于设计做的下划线用浏览器默认属性样式很难调整,使用这个属性并不能调整下划线与文字的间距, ...
CSS设置下划线与文字间距距离
css的写下划线 text-decoration: underline; 但是这样的样式下划线太靠近文字了如图修改方式 border-bottom: 1px solid red;padding ...
php css下划线,css下划线与文字之间的距离如何设置？
本篇文章给大家介绍一下css下划线和文字间距离的的设置方法,接下来我们来看看具体的内容. 在上一篇文章中我们介绍了关于css下划线的设置方法,但是设置出来的下划线感觉与文字之间距离太近,有时在网页中会 ...
css中字体之间的距离是什么意思,css字符间距(css文字间距怎么设置)
怎么样控制字和字之间的间距,而不是行间距. 在需要设置的CSS标签下加入一下代码即可.word-spacing:8px;letter-spacing: 1px; line-height:25px是绝对 ...
Android设置drawableRight或drawableLeft后设置图标与文字间距
Android设置drawableRight或drawableLeft后设置图标与文字间距在项目中,当给控件设置drawableRight="图片资源"或drawableLeft ...
html两条下划线重叠,文字和text-decoration:underline下划线重叠问题
一.text-decoration:underline下划线的问题 CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会 ...
php下划线长度如何改变,如何制作固定长度下划线(输入文字而长度不变)
平时写报告少不了要制作封面.封面上一般有下划线,用来填写名字等信息.但是,平时一般人都是通过敲空格来控制下划线的长度,这样往往上下对不齐.并且在下划线上输入文字时,下划线长度就发生了变化.这样不仅费时 ...
html文字居中加下划线,HTML文字对齐，斜体，下划线和删除线
标题的对齐方式: 在默认情况下,标题文字都是靠左对齐的.而在网页的制作过程中,可以实现标题文字的编排设置.最常用的就是关于对齐方式的设置了,可以为标题标签添加"align"属性进行 ...

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

【CSS】下划线与文字间距，下划线粗细以及下划线颜色的设置相关推荐

最新文章

热门文章