如何增加CSS中文字和下划线之间的差距
使用CSS，当文本具有text-decoration:underline应用，是否有可能增加文本和下划线之间的距离？
不，但你可以用类似border-bottom: 1px solid #000和padding-bottom: 3px 。
如果你想要“下划线”（在我的例子中是一个边框）相同的颜色，你可以省略颜色声明，即border-bottom-width: 1px和border-bottom-style: solid 。
对于多行，您可以将多行文本包裹在元素内的一个范围内。 例如<a href="#"><span>insert multiline texts here</span></a>然后<a href="#"><span>insert multiline texts here</span></a>添加border-bottom和padding 。
直接使用border-bottom的问题是，即使使用padding-bottom: 0 ，下划线往往离文本太远看起来不错。 所以我们还没有完全的控制。
提供像素精度的一个解决scheme是使用:after伪元素：
a { text-decoration: none; position: relative; } a:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; }
通过更改bottom属性（负数很好），您可以将下划线正好放在您想要的位置。
这种技术要小心的一个问题是，它与行换行有点怪异。
你可以使用这个text-underline-position: under
详情请看这里： https : //css-tricks.com/almanac/properties/t/text-underline-position/
进入text-decoration:underline的视觉风格的细节text-decoration:underline几乎是徒劳的，所以你将不得不采取一些破解删除text-decoration:underline并用其他东西replace它，直到一个神奇的远未来的CSS版本给了我们更多的控制权。
这对我工作：
a { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) 81%, #222222 81.1%, #222222 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) ); text-decoration: none; }
- 调整％值（81％和85％），以改变文字的距离
- 调整两个％值之间的差异以更改线条粗细
- 调整颜色值（＃222222）以更改下划线颜色
- 适用于多行内联元素
- 适用于任何背景
这是一个版本，其中包含所有专有属性以实现一些向后兼容性：
a { /* This code generated from: http://colorzilla.com/gradient-editor/ */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 81%, rgba(0,0,0,1) 81.1%, rgba(0,0,0,1) 85%, rgba(0,0,0,0) 85.1%, rgba(0,0,0,0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(81%,rgba(0,0,0,0)), color-stop(81.1%,rgba(0,0,0,1)), color-stop(85%,rgba(0,0,0,1)), color-stop(85.1%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 81%,rgba(0,0,0,1) 81.1%,rgba(0,0,0,1) 85%,rgba(0,0,0,0) 85.1%,rgba(0,0,0,0) 100%); /* W3C */ text-decoration: none; }
更新：SASSY版本
我为此做了一个scss混音。 如果你不使用SASS，上面的常规版本仍然很好…
@mixin fake-underline($color: #666, $top: 84%, $bottom: 90%) { background-image: linear-gradient( 180deg, rgba(0,0,0,0), rgba(0,0,0,0) $top, $color $top + 0.1%, $color $bottom, rgba(0,0,0,0) $bottom + 0.1%, rgba(0,0,0,0) ); text-decoration: none; }
然后像这样使用它：
$blue = #0054a6; a { color: $blue; @include fake-underline(lighten($blue,20%)); } a.thick { color: $blue; @include fake-underline(lighten($blue,40%), 86%, 99%); }
更新2：下降提示
如果你有一个坚实的背景颜色，尝试添加一个薄的text-stroke或text-shadow与背景相同的颜色，使下巴看起来不错。
信用
这是我最初在https://eager.io/app/smartunderlinefind的技术的简化版本，但文章已被删除。;
我知道这是一个古老的问题，但对于单行文本设置display: inline-block ，然后设置height已经很好地控制了边框和文本之间的距离。
@最后孩子的答案是一个很好的答案！
然而，给我的H2添加一个边框会产生比文字更长的下划线。
如果您正在dynamic编写您的CSS，或者如果像我一样幸运，并知道文本将是什么，您可以执行以下操作：
-
改变
content到正确的长度（即相同的东西 -
文本）设置字体颜色为
transparent（或rgba(0,0,0,0)）
（例如）将下面的子代码改为： <h2>Processing</h2>
a { text-decoration: none; position: relative; } a:after { content: 'Processing'; color: transparent; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; }
看我的小提琴 。
您将需要使用边界宽度属性和填充属性。 我添加了一些animation，使其看起来更酷：
body{ background-color:lightgreen; } a{ text-decoration:none; color:green; border-style:solid; border-width: 0px 0px 1px 0px; transition: all .2s ease-in; } a:hover{ color:darkblue; border-style:solid; border-width: 0px 0px 1px 0px; padding:2px; }
<a href='#' >Somewhere ... over the rainbow (lalala)</a> , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a <i><a href="#">what a wonder-ful world!</a> World!</i>
多行文本或链接的替代方法，可以将文本包装在块元素中的一个范围内。
<a href="#"> <span>insert multiline texts here</span> </a>
那么你可以在<span>上添加border-bottom和padding。
a { width: 300px; display: block; } span { padding-bottom: 10px; border-bottom: 1px solid #0099d3; line-height: 48px; }
你可以参考这个小提琴。 https://jsfiddle.net/Aishaterr/vrpb2ey7/2/
如果你想：
- 多
- 点
- 与自定义底部填充
- 没有包装
下划线，您可以使用1个像素高度的背景图像与repeat-x和100% 100%位置：
display: inline; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;
你可以用像px或em这样的东西replace第二个100%来调整下划线的垂直位置。 如果你想添加垂直填充，你也可以使用calc ，例如：
padding-bottom: 5px; background-position-y: calc(100% - 5px);
当然你也可以用另一种颜色，高度和devise来制作你自己的base64 png图案，例如： http ： //www.patternify.com/ – 只需在2×1上设置方形宽度和高度即可。
灵感来源： http ： //alistapart.com/article/customunderlines
我能够使用U（下划线标签）
u { text-decoration: none; position: relative; } u:after { content: ''; width: 100%; position: absolute; left: 0; bottom: 1px; border-width: 0 0 1px; border-style: solid; } <a href="" style="text-decoration:none"> <div style="text-align: right; color: Red;"> <u> Shop Now</u> </div> </a>
这是我使用的：
HTML：
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
CSS：
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
