413

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

4

16 回答 16

442

不，但是您可以使用类似的东西border-bottom: 1px solid #000and padding-bottom: 3px。

如果您想要“下划线”的相同颜色（在我的示例中是边框），您只需省略颜色声明，即border-bottom-width: 1px和border-bottom-style: solid.

对于多行，您可以将多行文本包装在元素内的跨度中。例如，然后<a href="#"><span>insert multiline texts here</span></a>只需添加-演示border-bottompadding<span>

于 2009-11-14T15:50:23.800 回答
264

2021 年更新： text-underline-offset现在几乎可以在所有主要和最新版本的浏览器中使用（IE11 是不行的）：https ://caniuse.com/?search=text-underline-offset

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

这种技术需要注意的一个问题是它在换行时表现得有点奇怪。

于 2012-09-05T13:03:55.547 回答
112

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

有关更多详细信息，请参见此处：https ://css-tricks.com/almanac/properties/t/text-underline-position/

另请参阅浏览器兼容性。

于 2017-04-19T07:52:21.413 回答
30

采用

{
   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

于 2020-08-27T00:23:30.073 回答
29

这对我来说很有效。

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

于 2018-12-13T06:56:52.873 回答
12

进入视觉风格的细节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：下降者提示

如果您有纯色背景色，请尝试添加较薄的颜色text-stroke或与背景颜色text-shadow相同的颜色，以使下降部分看起来不错。

信用

这是我最初在https://eager.io/app/smartunderline找到的技术的简化版本，但该文章已被删除。

于 2015-08-21T16:48:53.520 回答
7

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

于 2013-06-24T17:19:22.017 回答
6

@last-child 的回答很好！

但是，在我的 H2 中添加边框会产生比文本更长的下划线。

如果您正在动态编写 CSS，或者如果您像我一样幸运并且知道文本将是什么，您可以执行以下操作：

  1. 将其更改content为正确的长度（即相同的

  2. 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;
}
于 2013-04-16T21:08:44.197 回答
3

看我的小提琴。

您需要使用边框宽度属性和填充属性。我添加了一些动画让它看起来更酷：

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>

于 2015-12-19T16:46:37.253 回答
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。

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

于 2016-06-03T19:49:17.503 回答
2

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

<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/Aishater/vrpb2ey7/2/

于 2016-11-09T10:41:49.413 回答
2

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

更多的文本下划线位置属性，你可以看看这里

于 2019-03-25T06:40:42.800 回答
1

这就是我使用的：

html:

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

CSS：

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
于 2016-10-08T22:48:23.117 回答
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>
于 2016-06-17T10:24:06.530 回答
0

我用什么：

<span style="border-bottom: 1px solid black"> Enter text here </span>
于 2018-11-06T13:48:12.727 回答
0

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

于 2021-09-25T06:55:32.160 回答