使用CSS，当文本应用text-decoration:underline时，是否可以增加文本和下划线之间的距离？
【问题讨论】：
text-underline-position: under; 和 text-decoration-skip: ink; 请注意，这可能无法向后兼容旧版浏览器。
text-underline-offset投票：bugs.chromium.org/p/chromium/issues/…
不，但你可以选择border-bottom: 1px solid #000 和padding-bottom: 3px。
如果您想要“下划线”的相同颜色（在我的示例中是边框），您只需省略颜色声明，即 border-bottom-width: 1px 和 border-bottom-style: solid。
对于多行，您可以将多行文本包装在元素内的 span 中。例如。 <a href="#"><span>insert multiline texts here</span></a> 然后在 <span> - Demo 上添加 border-bottom 和 padding
【讨论】：
<a href="#"><span>insert multiline texts here</span></a> 然后只需在 <span> 上添加边框底部和填充。 jsfiddle.net/Aishaterr/vrpb2ey7/1
2021 年更新：
text-underline-offset 现在几乎适用于所有主要和最新版本的浏览器（IE11 是不行的）：https://caniuse.com/?search=text-underline-offset
2019 年更新： CSS 工作组发布了 text decoration level 4 的草案，其中将添加一个新属性 text-underline-offset（以及 text-decoration-thickness），以允许控制下划线。在撰写本文时，它是一个早期的草案，还没有被任何浏览器实现，但看起来它最终会使下面的技术过时。
原始答案如下。
直接使用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 属性（负数也可以），您可以将下划线准确定位到您想要的位置。
这种技术需要注意的一个问题是，换行时它的行为有点奇怪。
【讨论】：
text-underline-offset 在 Safari 和 Firefox 中运行良好。 （Chrome 显然没有收到备忘录。）
text-underline-offset 最近已添加到 Chrome 和 Edge。多么美好的时光啊！
你可以用这个text-underline-position: under
更多详情请看这里：https://css-tricks.com/almanac/properties/t/text-underline-position/
【讨论】：
这对我来说很有效。
<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>【讨论】：
text-underline-position
使用
{
text-decoration: underline;
text-underline-offset: 2px;
}
Here, text-underline-offset: 2px; is used to define the distance of the underline from the text, where "2px" is the distance.
Note: text-underline-offset: 2px; can only be used after
text-decoration: underline;
You can also change the thickness of underline by writing
text-decoration: underline 5px;
where "5px" is the thickness.
更多查询请参考此链接：https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-offset
【讨论】：
text-underline-offset: 2px 将文本下划线设置为 2px 的偏移量...以防有人不理解。 Chrome 现在也支持了。
深入了解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 找到的技术的简化版本，但该文章已被删除。
【讨论】：
我知道这是一个老问题，但是对于单行文本设置 display: inline-block 然后设置 height 对我来说可以很好地控制边框和文本之间的距离。
【讨论】：
@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;
}
【讨论】：
display: inline-block 会修复它。将文本替换为 content 看起来像是一种可能会在许多方面破坏的技巧。
见我的fiddle。
您需要使用边框宽度属性和填充属性。我添加了一些动画让它看起来更酷：
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> 上添加边框底部和填充。
a {
width: 300px;
display: block;
}
span {
padding-bottom: 10px;
border-bottom: 1px solid #0099d3;
line-height: 48px;
}
你可以参考this fiddle。 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%;
您可以将第二个100% 替换为px 或em 等其他内容，以调整下划线的垂直位置。如果要添加垂直填充，也可以使用calc，例如：
padding-bottom: 5px;
background-position-y: calc(100% - 5px);
当然，您也可以使用其他颜色、高度和设计制作自己的 base64 png 图案，例如这里：http://www.patternify.com/ - 只需将正方形宽度和高度设置为 2x1。
【讨论】：
如果您使用text-decoration: underline;，则可以使用text-underline-position: under;在下划线和文本之间添加空格
更多文字下划线位置属性，可以看here
【讨论】：
这是我用的：
html:
<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>
css:
.horizontal-line { border-bottom: 2px solid #FF0000; padding-bottom: 5px; }
【讨论】：
我可以使用 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>
【讨论】：
我用什么：
<span style="border-bottom: 1px solid black"> Enter text here </span>
【讨论】：
这里有一些很棒的解决方案，但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。 squarecandy 的答案也有效，但是有点复杂。使用border-bottom 会改变文本的布局并且会改变内容。
添加自定义下划线的一种解决方案是将下划线设为背景图像，其大小与文本大小相关。
a {
/* Change the source image to account for changes to the text colour. It should be a single column. */
background-image: url(data:image/png;base64,iVBORw__EDITED_OUT___0KGgYII=);
/*background-image: url('underlineImage.png');*/
background-size: 1px 1.1em;
background-repeat: repeat-x;
display: inline;
cursor: pointer;
text-decoration: none;
}
随着文本的增加，位置保持相对于文本大小。有了这个，你可以有任何你想要的下划线图像，比如“一排星星”，或者只是一条线。
上面的示例不包括创建效果的完整 base64 信息。这适用于所有浏览器，因为它是一项基本功能，并且与旧浏览器非常兼容。
<a href="#">This _____ is the link</a>
如果背景图片是具有透明度的 png，则它在其他元素之上效果很好。
【讨论】：