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

评论

这并不是您所要的，但这是关于以下主题的有趣读物：CSS设计：自定义下划线
距离由所使用的字体确定。尝试使用网络安全字体。
如今，CSS3具有许多新的文本装饰属性。请检查alligator.io/css/text-decoration示例：text-underline-position：under;和text-decoration-skip：墨水；请注意，这可能与旧版浏览器不向后兼容。
另一个好的解决方案
请在此处为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。对于多行，可以将多行文本包装在元素内的跨度中。例如。 <a href="#"><span>insert multiline texts here</span></a>，然后只需在border-bottom上添加padding和<span>-演示

评论

我唯一的问题是，当我使用line-height等于div高度，然后垂直对齐时：middle;要使其居中，那么我不能使用此技巧，因为下划线最终会在div以下。

– deweydb
2012年11月16日23:55
@deweydb：如何将padding-bottom也添加到容器div中？ jsfiddle.net/dYfjc/1

–chelmertz
2012年11月17日15:32
+1我不知道放弃color属性来继承字体的颜色-将来可以省很多汗水！

–拉里
13年7月8日在12:52
我不太确定为什么这个答案会有这么多的反对。这不适用于多行文字。

–user3888372
15年7月17日在15:46
对于多行，可以将多行文本包装在元素内的跨度中。例如。 在此处插入多行文本 ，然后在上添加边框底部和填充。 jsfiddle.net/Aishaterr/vrpb2ey7/1

–丹尼尔·埃尔南德斯（Daniel Hernandez）
16年11月8日，11：42


#2 楼

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

要提防此技术的一个问题是，换行的行为有点怪异。

评论

这对我的特定问题不起作用，但这是一个绝妙的技巧。 +1

–user1720624
13年1月15日在18:32
很好的解决方法，但这不适用于跨越多条线的锚点

–威尔斯特
13年5月13日在15:53
@ last-child这比下划线要好，但是使用文本换行不能对每一行都起作用

– Nishantha
15年4月18日在4:20
一个问题是，底线和底线是两件事。例如，部分文字应在下划线下方延伸。如果将a-tag设置为按钮样式，则没有使用下边框作为下划线的自由。

–安德斯·林登（AndersLindén）
2015年12月2日在15:28


想象一下，告诉某个刚接触Web开发的人，图形设计师，普通用户或您的妈妈，这是在文本之间添加一些可控制的空间所需要的内容，并且带有下划线，他们会想知道您正在做什么？ 。

– MarcGuay
16年5月26日在21:45

#3 楼

您可以使用此text-underline-position: under

更多信息请参见这里：https://css-tricks.com/almanac/properties/t/text-underline-position/

请参阅还具有浏览器兼容性。

评论

谢谢！如果您尝试绘制虚线下划线，并且看到它是在文本底部和线条之间没有空格的情况下绘制的，则可以解决此问题。

–乔纳森·克罗斯（Jonathan Cross）
17年5月12日在18:36
这是没有任何变通办法的现代浏览器的正确答案。

–帕拉沙（Paras Shah）
17年9月28日在13:36
它甚至不能在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
18-2-23在7:43


到目前为止，这仅在chrome浏览器中确实有效，而不能用于其他浏览器。

– miir
18 Mar 8 '18 at 0:13


好吧，截至本文发表之日，我也看到它在Firefox中也可以使用。

– Jarad
20年5月1日，2：50

#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/zh-CN/docs/Web/CSS/…，Firefox不支持text-underline-position。

– Floran Gmehlin
19年5月5日在10:04
很有意思。很棒的标注。谢谢！

–乔丹·斯塔克（Jordan Starrk）
19年6月15日在17:24
根据相同的链接，Firefox从74开始受支持。

–GSerg
20年5月11日在16:54


#5 楼

深入了解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上发现的技术的简化版本，但此后该文章已被删除。 br />

评论

不幸的是eager.io链接不再起作用。您还记得什么使后代看起来更好的骇客吗？

–卡诺
17年5月21日在11:02
@Kano-我相信它使用的文字阴影的颜色与纯色背景相同。

– squarecandy
17年5月21日在15:54
同样，使用上述技术，您可以将下划线的颜色设置为与文本不同的颜色，因此有时我将其设置为比文本浅，这使得与下降器的碰撞不再是可读性问题。

– squarecandy
17年5月21日在16:00

#6 楼

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

评论

我不需要设置高度。我只是将其包装在另一个div中，并希望将其居中，所以我只在out div上设置了文本对齐方式。

–Guy Lowe
2015年2月9日在2:26

#7 楼

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

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

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


将content更改为正确的长度（即相同的
文本），将字体颜色设置为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;
}


评论

H2是块元素，可以解释为什么下划线比文本长。也许显示：内联块将修复它。用内容替换文本看起来像是一种破解，可能会在许多方面破坏。

–最后一个孩子
2013年6月17日10:54


#8 楼

只需使用
{
   text-decoration-line: underline;
   text-underline-offset: 2px;
}


评论

欢迎使用堆栈溢出。不鼓励在堆栈溢出上使用仅代码的答案，因为它们没有解释它如何解决问题。请编辑您的答案，以解释该代码的作用以及如何在此问题已经获得许多其他认可的答案的基础上进行改进，以便它对于遇到类似问题的其他用户很有用

– FluffyKitten
20/08/27在2:14
没有Chrome对此提供支持。 caniuse.com/?search=text-underline-offset

–约翰·雷蒙（John-raymon）
20-10-15在10:12

#9 楼

参见我的小提琴。

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




#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;
}


您可以参考这个小提琴。 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;在下划线和文本之间添加空格。

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

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