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

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

564720 次浏览
小开
最佳答案

不，但你可以用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> - 演示上添加border-bottom和padding

小开

2021年<强>更新: text-underline-offset现在几乎适用于所有主流和最新版本的浏览器(IE11是不适用的)

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属性(负数也可以)，你可以将下划线精确地放置在你想要的位置。

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

小开

@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;
}
小开

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

小开

深入了解text-decoration:underline的视觉样式的细节几乎是徒劳的，所以你将不得不使用某种hack来删除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>

  • Adjust the % values (81% and 85%) to change how far the line is from the text
  • Adjust the difference between the two % values to change the line thickness
  • adjust the color values (#222222) to change the underline color
  • works with multiple line inline elements
  • works with any background

Here's a version with all the proprietary properties for some backwards compatibility:

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找到的技术的简化版本，但这篇文章已经被撤下了。

小开

请看我的小提琴。

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

小开

如果你想:

  • 多行
  • 虚线
  • 自定义底部填充
  • 没有包装

下划线，你可以使用1像素高度背景图像与repeat-x和100% 100%位置:

display: inline;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAEUlEQVQIW2M0Lvz//2w/IyMAFJoEAis2CPEAAAAASUVORK5CYII=') repeat-x 100% 100%;

你可以用px或em替换第二个100%来调整下划线的垂直位置。如果你想添加垂直填充，你也可以使用calc，例如:

padding-bottom: 5px;
background-position-y: calc(100% - 5px);

当然，你也可以用另一种颜色、高度和设计来创建你自己的base64 png模式，例如:http://www.patternify.com/ -只设置正方形宽度和amp;2x1处的高度。

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

小开

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

这是我使用的:

html:

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

css:

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

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

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

然后你可以在<span>上添加border-bottom和padding。

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


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

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

小开

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

更多细节:https://css-tricks.com/almanac/properties/t/text-underline-position/

另见浏览器兼容性。

小开

我用什么:

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

以下是对我很有效的方法。

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

小开

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

有关更多的文本下划线位置属性，您可以查看在这里

小开

使用

{
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

小开

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

小开

这个问题有一个很简单的答案

text-decoration: underline;
text-underline-offset: 3px;

text-underline-offset是CSS自己的方法。 下面是关于__abc0

的更多内容
小开

你可以使用:

text-underline-position: under;


text-underline-offset: {value(px)};

这个属性是移动下划线，它在你提供的链接通过offset的值下面。

更多参考，请访问: textunderlineoffest | developer.mozilla.org < / p >


提交答案