使用CSS，当文本应用text-decoration:underline时，是否可以增加文本与下划线之间的距离？
答案 0 :(得分：295)
不，但您可以选择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>然后只需在border-bottom - Demo
padding和<span>
答案 1 :(得分：101)
更新2019年：CSS工作组已发布text decoration level 4草稿，该草稿会添加新属性text-underline-offset（以及text-decoration-width）以允许控制下划线的确切位置。在撰写本文时，它是一个早期阶段的草案，并没有被任何浏览器实现，但看起来它最终会使该技术过时。
以下原始答案。
直接使用border-bottom的问题在于，即使使用padding-bottom: 0，下划线也往往与文本相距太远 看起来不错。所以我们仍然没有完全控制。
一种能够提高像素精度的解决方案是使用: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属性（负数很好），您可以将下划线准确定位在您想要的位置。
这项技术要注意的一个问题是线条包裹它的行为有点奇怪。
答案 2 :(得分：61)
您可以使用此text-underline-position: under
有关详情，请参阅此处：https://css-tricks.com/almanac/properties/t/text-underline-position/
答案 3 :(得分：11)
进入text-decoration:underline的视觉风格的细节几乎是徒劳的，所以你将不得不采取某种方法来删除text-decoration:underline并将其替换为其他东西，直到一个神奇的远期未来版本的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;
}<a href="#">Lorem ipsum</a> dolor sit amet, <a href="#">consetetur sadipscing</a> elitr, sed diam nonumy eirmod tempor <a href="#">invidunt ut labore.</a>
这是一个具有所有专有属性的版本，具有一些向后兼容性：
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 mixin。如果您不使用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/smartunderline找到的技术的简化版本，但该文章已被删除。
答案 4 :(得分：6)
@ last-child的答案是一个很好的答案！
但是，为我的H2添加边框会产生比文字更长的下划线。
如果您正在动态编写CSS，或者如果您喜欢我，那么您很幸运且知道文本是什么，您可以执行以下操作：
将content更改为正确的长度（即相同的
text）将字体颜色设置为transparent（或rgba(0,0,0,0)）
加下<h2>Processing</h2>（例如），
将last-child的代码更改为：
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;
}
答案 5 :(得分：6)
我知道这是一个老问题，但对于单行文字设置display: inline-block然后设置height对我来说控制边框和文本之间的距离效果很好。
答案 6 :(得分：6)
这是对我有效的方法。
<style type="text/css">
#underline-gap {
text-decoration: underline;
text-underline-position: under;
}
</style>
<body>
<h1 id="underline-gap"><a href="https://Google.com">Google</a></h1>
</body>
答案 7 :(得分：3)
查看我的fiddle。
您需要使用border width属性和padding属性。我添加了一些动画让它看起来更酷：
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>
答案 8 :(得分：2)
多行文本或链接的替代方法，您可以将文本包装在块元素内的范围内。
<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/
答案 9 :(得分：1)
如果你想：
下划线，您可以使用 1像素高度背景图片repeat-x和100% 100%位置：
display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;
您可以使用100%或px之类的其他内容替换第二个em，以调整下划线的垂直位置。如果您想添加垂直填充，也可以使用calc，例如：
padding-bottom: 5px;
background-position-y: calc(100% - 5px);
当然，您也可以使用其他颜色，高度和设计制作自己的base64 png图案，例如：这里：http://www.patternify.com/ - 只是设置方形宽度＆amp;身高2x1。
答案 10 :(得分：1)
只需使用
{
text-decoration-line: underline;
text-underline-offset: 2px;
}
答案 11 :(得分：0)
我能够使用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>
答案 12 :(得分：0)
这就是我使用的：
HTML：
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
的CSS：
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
答案 13 :(得分：0)
我用什么
<span style="border-bottom: 1px solid black"> Enter text here </span>
答案 14 :(得分：0)
如果您使用的是text-decoration: underline;，则可以使用text-underline-position: under;
有关更多的文本下划线位置属性，您可以查看here