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

css CSS

番长猴子

2020-03-23

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

第3070篇《如何增加CSS中文本和下划线之间的距离》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共11个回答

斯丁前端 2020.03.23

我用什么：

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

宝儿 2020.03.23

这就是我用的：

的HTML：

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

CSS：

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

古一Green 2020.03.23

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

Green达蒙Harry 2020.03.23

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

有关更多的text-underline-position属性，您可以在这里查看

斯丁前端 2020.03.23

作为多行文本或链接的替代方法，您可以将文本包装在block元素内的span中。

<a href="#">
    <span>insert multiline texts here</span>
</a>

那么您只需在上添加border-bottom和padding即可<span>。

a {
  width: 300px;
  display: block;
}

span {
  padding-bottom: 10px;
  border-bottom: 1px solid #0099d3;
  line-height: 48px;
}

您可以参考这个小提琴。https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

Stafan路易 2020.03.23

深入了解视觉样式的细节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>

调整百分比值（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：后裔提示

If you have a solid background color, try adding a thin text-stroke or text-shadow in the same color as your background to make the descenders look nice.

Credit

This is simplified version of the technique I originally found at https://eager.io/app/smartunderline, but the article has since been taken down.

小胖猪猪 2020.03.23

这对我来说很有效。

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

小胖 2020.03.23

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

卡卡西 2020.03.23

2019年更新： CSS工作组发布了文本装饰级别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属性（可以使用负数），可以将下划线精确定位在所需位置。

这种技术要提防的一个问题是，它在换行时表现得有些奇怪。

Gil伽罗小宇宙 2020.03.23

没有，但你可能会喜欢的东西去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并padding在<span>- 演示上