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

306

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

css  underline 
— 最大
source
1
这并不是您所要的，但这是关于该主题的有趣读物：CSS设计：自定义下划线
— Peter Rowell，2009年
距离由所使用的字体确定。尝试使用网络安全字体。
— Alexei Danchenkov 2014年
1
如今，CSS3具有许多新的文本装饰属性。请查看alligator.io/css/text-decoration示例：text-underline-position: under;并且text-decoration-skip: ink;请注意，这可能与旧版浏览器不向后兼容。
— chocolata
1
— w3spi
1
投票text-underline-offset在这里：bugs.chromium.org/p/chromium/issues/...
— 马克·费舍尔

Answers:

356

不，但您可以选择类似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>- 演示上

— 切尔默茨
source
3
这个技巧的唯一问题是，当我使用line-height等于div高度，然后使用vertical-align时：middle; 要使其居中，那么我不能使用此技巧，因为下划线最终会在div以下。
— deweydb
@deweydb：如何将padding-bottom也添加到容器div中？jsfiddle.net/dYfjc/1
— chelmertz
+1我不知道放弃color属性来继承字体的颜色-将来可以省很多汗水！
— 拉里
9
我不太确定为什么这个答案会有这么多的反对。这不适用于多行文字。
3
对于多行，可以将多行文本包装在元素内的跨度中。例如，<a href="#"><span>insert multiline texts here</span></a>然后在上添加border-bottom-bottom和padding <span>。jsfiddle.net/Aishaterr/vrpb2ey7/1
— Daniel Hernandez
133

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属性（可以使用负数），可以将下划线精确定位在所需位置。

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

— 最后一个孩子
source
2
这对我的特定问题不起作用，但这是一个绝妙的技巧。+1
11
好的解决方法，但这对跨多行的锚不起作用
— Willster，
@ last-child这比下划线要好，但是使用文本换行不能在每一行都起作用
— Nishantha 2015年
一个问题是，底线和底线是两回事。例如，部分文字应在下划线下方延伸。如果将a-tag设置为按钮样式，则没有使用下边框作为下划线的自由。
— 安德斯·林登
10
想象一下，告诉某个刚接触Web开发的人，图形设计师，普通用户或您的妈妈，这是在文本之间添加一些可控制的空间所必需的，并且带有下划线，他们会想知道您在做什么方面的工作。
— MarcGuay
79

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

请参阅此处以获取更多详细信息：https : //css-tricks.com/almanac/properties/t/text-underline-position/

另请参阅浏览器兼容性。

— 德克·休恩（Duc Huynh）
source
2
谢谢！如果您尝试绘制虚线下划线，并且看到它是在文本底部和线条之间没有空格的情况下绘制的，则可以解决此问题。
— 乔纳森·克罗斯
6
对于没有任何解决方法的现代浏览器，这是正确的答案。
— Paras Shah
2
它甚至不能在Firefox中使用，甚至不能与供应商前缀一起使用-而是在W3C规范中：w3.org/TR/css-text-decor-3/#text-underline-position-property。其他相关资源：quackit.com/css/css3/properties/css_text-underline-position.cfm
— rosell.dk
4
目前，这仅在chrome浏览器中有效，而对于其他浏览器不是解决方案。
— miir
2
好吧，截至本文发表之日，我也看到它在Firefox中也可以使用。
— Jarad
15

这对我来说很有效。 

<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>
展开摘要

— 乔丹·斯塔克
source
2
这是该说明重要的text-underline-position不是Firefox的支持下，按照developer.mozilla.org/en-US/docs/Web/CSS/...
— Floran Gmehlin
很有意思。很棒的标注。谢谢！
— 约旦·斯塔克
Firefox从74开始支持该链接（按相同链接）。
— GSerg
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>
展开摘要

  • 调整百分比值（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上发现的技术的简化版本，但此后该文章已被删除。

— 方糖
source
不幸的是eager.io链接不再起作用。您还记得什么使后代看起来更好的骇客吗？
— 卡诺
1
@Kano-我相信它使用的文字阴影的颜色与纯色背景相同。
— squarecandy
同样，使用上述技术，您可以将下划线的颜色设置为与文本不同的颜色，因此有时我将其设置为比文本浅，这使得与下降器的碰撞不再是可读性问题。
— squarecandy'17
7

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

— 多明尼克
source
1
我不需要设置高度。我只是将其包装在另一个div中，并希望将其居中，所以我只在out div上设置了文本对齐方式。
— Guy Lowe'2
6

@ last-child的答案是一个很好的答案！

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

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

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

  2. 文字），将字体颜色设置为transparent（或rgba(0,0,0,0)）

要加下划线<h2>Processing</h2>（例如），请将最后一个孩子的代码更改为：

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;
}
— 迈克尔·格里斯曼
source
9
H2是块元素，可以解释为什么下划线比文本长。也许display: inline-block会解决它。用content看起来像是hack的hack 替换文本可能会在许多方面中断。
— 最后一个孩子
3

看看我的小提琴。

您将需要使用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>
展开摘要

— 星尘
source
2

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

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

— 丹尼尔·埃尔南德斯
source
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

— 麦克米米克
source
1

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

有关text-underline-position属性的更多信息，请参见此处

— 伊夫拉
source
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>
— 阿伦·普拉萨德（Arun Prasad ES）
source
0

这就是我用的：

的HTML：

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

CSS：

.horizontal-line { border-bottom: 2px solid  #FF0000; padding-bottom: 5px; }
— 君士坦丁斯·康斯坦丁诺
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.