如何在 CSS 中增加文本和下划线之间的间距

Posted 2023-02-23

技术标签:

【中文标题】如何在 CSS 中增加文本和下划线之间的间距【英文标题】：How to increase the gap between text and underlining in CSS 【发布时间】：2010-12-16 14:49:20 【问题描述】：

使用CSS，当文本应用text-decoration:underline时，是否可以增加文本和下划线之间的距离？

【问题讨论】：

这不是你想要的，但它是关于这个主题的有趣读物：CSS Design: Custom Underlines 距离由使用的字体决定。试试网络安全字体。 CSS3 现在有很多新的文本装饰属性。请查看 alligator.io/css/text-decoration 示例：text-underline-position: under; 和 text-decoration-skip: ink; 请注意，这可能无法向后兼容旧版浏览器。另一个good solution 在这里为text-underline-offset投票：bugs.chromium.org/p/chromium/issues/… 【参考方案1】：

不，但你可以选择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

【讨论】：

我对这个技巧的唯一问题是当我使用等于 div 高度的 line-height 然后使用 vertical-align: middle;让它居中，然后我不能使用这个技巧，因为这样下划线会在 div 下方结束。 @deweydb：如何将 padding-bottom 也添加到容器 div 中？ jsfiddle.net/dYfjc/1 +1 我不知道放弃 color 属性来继承字体的颜色 - 以后会省很多汗水！我很不确定为什么这个答案有这么多赞成票。这并不完全适用于多行文本。对于多行，您可以将多行文本包装在元素内的跨度中。例如。 <a href="#"><span>insert multiline texts here</span></a> 然后只需在 <span> 上添加边框底部和填充。 jsfiddle.net/Aishaterr/vrpb2ey7/1【参考方案2】：

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 属性（负数也可以），您可以将下划线准确定位到您想要的位置。

这种技术需要注意的一个问题是，换行时它的行为有点奇怪。

【讨论】：

这不适用于我的特定问题，但这是一个绝妙的技巧。 +1 很好的解决方法，但这不适用于跨多行的锚想象一下告诉一个 Web 开发新手、平面设计师、普通用户或你的妈妈，这是在文本之间添加一些受控空间所需要的，并且它是下划线，他们会想知道你在做什么。感谢您的更新。截至 2020 年 8 月，text-underline-offset 在 Safari 和 Firefox 中运行良好。（Chrome 显然没有收到备忘录。） text-underline-offset 最近已添加到 Chrome 和 Edge。多么美好的时光啊！【参考方案3】：

你可以用这个text-underline-position: under

更多详情请看这里：https://css-tricks.com/almanac/properties/t/text-underline-position/

另见browser compatibility。

【讨论】：

谢谢！如果您尝试使用虚线下划线并看到它在文本底部和行之间没有空格，那么这可以解决问题。这是现代浏览器的正确答案，没有任何解决方法。它在 Firefox 中不起作用，即使使用供应商前缀也不行 - 但它在 W3C 规范中：w3.org/TR/css-text-decor-3/#text-underline-position-property。其他相关资源：quackit.com/css/css3/properties/css_text-underline-position.cfm 目前，这只适用于chrome浏览器，不适用于其他浏览器。嗯，截至发表此评论之日，我看到这在 Firefox 中也可以使用。【参考方案4】：

这对我来说很有效。

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

【讨论】：

请注意，根据developer.mozilla.org/en-US/docs/Web/CSS/…，Firefox 不支持text-underline-position 非常有趣。伟大的标注。谢谢！从 74 开始在 Firefox 中受支持，根据相同的链接。谢谢@Jordan Starrk 这对我有用。【参考方案5】：

使用


   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

【讨论】：

欢迎来到 Stack Overflow。 Stack Overflow 上不鼓励仅使用代码的答案，因为它们没有解释它是如何解决问题的。请编辑您的答案，以解释此代码的作用以及它如何改进该问题已有的许多其他赞成的答案，以便它对其他有类似问题的用户有用没有 chrome 支持。 caniuse.com/?search=text-underline-offset errrr yes - 作为解释 .... text-underline-offset: 2px 将文本下划线设置为 2px 的偏移量...以防有人不理解。 Chrome 现在也支持了。【参考方案6】：

深入了解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;

&lt;a href="#"&gt;Lorem ipsum&lt;/a&gt; dolor sit amet, &lt;a href="#"&gt;consetetur sadipscing&lt;/a&gt; elitr, sed diam nonumy eirmod tempor &lt;a href="#"&gt;invidunt ut labore.&lt;/a&gt;

调整 % 值（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 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 找到的技术的简化版本，但该文章已被删除。

【讨论】：

不幸的是，eager.io 链接不再起作用。你还记得让后裔看起来更漂亮的 hack 是什么吗？ @Kano - 我相信它使用了与纯色背景相同颜色的文本阴影。另外，通过上面的技术，你可以设置下划线的颜色与文本不同，所以有时我将它设置为比文本更亮，这使得与下降线的碰撞不成问题可读性。【参考方案7】：

我知道这是一个老问题，但是对于单行文本设置 display: inline-block 然后设置 height 对我来说可以很好地控制边框和文本之间的距离。

【讨论】：

我不需要设置高度。我只是将它包装在另一个 div 中，因为我希望它居中，所以我只是在 out div 上设置了 text-align。【参考方案8】：

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

【讨论】：

H2 是块元素，可以解释为什么下划线比文本长。也许display: inline-block 会修复它。将文本替换为 content 看起来像是一种可能会在许多方面破坏的技巧。【参考方案9】：

见我的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;

&lt;a href='#' &gt;Somewhere ... over the rainbow (lalala)&lt;/a&gt; , blue birds, fly... (tweet tweet!), and I wonder (hmm) about what a &lt;i&gt;&lt;a href="#"&gt;what a wonder-ful world!&lt;/a&gt; World!&lt;/i&gt;

【讨论】：

【参考方案10】：

作为多行文本或链接的替代方案，您可以将文本包装在块元素内的跨度中。

<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/

【讨论】：

【参考方案11】：

如果你愿意：

多行点缀带有自定义底部填充没有包装

下划线，您可以使用 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。

灵感来源：http://alistapart.com/article/customunderlines

【讨论】：

【参考方案12】：

如果您使用text-decoration: underline;，则可以使用text-underline-position: under;在下划线和文本之间添加空格

更多文字下划线位置属性，可以看here

【讨论】：

【参考方案13】：

这是我用的：

html:

<h6><span class="horizontal-line">GET IN</span> TOUCH</h6>

css:

.horizontal-line  border-bottom: 2px solid  #FF0000; padding-bottom: 5px;

【讨论】：

【参考方案14】：

我可以使用 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>

【讨论】：

【参考方案15】：

我用什么：

<span style="border-bottom: 1px solid black"> Enter text here </span>

【讨论】：

【参考方案16】：

这里有一些很棒的解决方案，但每个都有一些问题。每个浏览器的文本下划线偏移量是不同的。 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，则它在其他元素之上效果很好。

【讨论】：

以上是关于如何在 CSS 中增加文本和下划线之间的间距的主要内容，如果未能解决你的问题，请参考以下文章

应用字母间距时CSS文本下划线太长？

在 Compose 中增加 AlertDialog 的标题和文本之间的间距

如何删除文本字段中图标和文本之间的间距 - Flutter？

CSS减少文本和边框之间的空间

如何在这些进度条标题之间添加间距？

如何使用 pygraphviz 增加点图中节点之间的间距？