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

Question

提问by maxp

Using CSS, when text has text-decoration:underlineapplied, is it possible to increase the distance between the text and the underline?

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

Answer 1

回答by chelmertz

No, but you could go with something like border-bottom: 1px solid #000and padding-bottom: 3px.

没有，但你可能会喜欢的东西去border-bottom: 1px solid #000和padding-bottom: 3px。

If you want the same color of the "underline" (which in my example is a border), you just leave out the color declaration, i.e. border-bottom-width: 1pxand border-bottom-style: solid.

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

For multiline, you can wrap you multiline texts in a span inside the element. E.g. <a href="#"><span>insert multiline texts here</span></a>then just add border-bottomand paddingon the <span>- Demo

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

Answer 2

回答by last-child

Update 2019:The CSS Working Group has published a draft for text decoration level 4which would add a new property text-underline-offset(as well as text-decoration-thickness) to allow control over the exact placement of an underline. As of this writing, it's an early-stage draft and has not been implemented by any browser, but it looks like it will eventually make the technique below obsolete.

2019 年更新：CSS 工作组发布了文本修饰级别 4的草案，该草案将添加一个新属性text-underline-offset（以及text-decoration-thickness）以允许控制下划线的确切位置。在撰写本文时，它是一个早期草案，还没有被任何浏览器实现，但看起来它最终会使下面的技术过时。

Original answer below.

原答案如下。

The problem with using border-bottomdirectly is that even with padding-bottom: 0, the underline tends to be too far awayfrom the text to look good. So we still don't have complete control.

border-bottom直接使用的问题是，即使使用padding-bottom: 0，下划线也往往离文本太远而不好看。所以我们仍然没有完全控制。

One solution that gives you pixel accuracy is to use the :afterpseudo element:

一种为您提供像素精度的解决方案是使用: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;
}

By changing the bottomproperty (negative numbers are fine) you can position the underline exactly where you want it.

通过更改bottom属性（负数很好），您可以将下划线准确放置在您想要的位置。

One problem with this technique to beware is that it behaves a bit weird with line wraps.

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

Answer 3

回答by Duc Huynh

You can use this text-underline-position: under

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

See here for more detail: https://css-tricks.com/almanac/properties/t/text-underline-position/

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

回答by Jordan Starrk

Here is what works well for me.

这是对我有用的方法。

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

Answer 5

回答by squarecandy

Getting into the details of the visual style of text-decoration:underlineis pretty much futile, so you're going to have to go with some kind of hack the removes text-decoration:underlineand replaces it with something else until a magical far-distant future version of CSS gives us more control.

深入了解视觉风格的细节text-decoration:underline几乎是徒劳的，所以你将不得不采取某种方式删除text-decoration:underline并用其他东西替换它，直到一个神奇的遥远未来版本的 CSS 给我们更多的控制.

This worked for me:

这对我有用：

   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

调整 % 值（81% 和 85%）以更改行距文本的距离
调整两个 % 值之间的差异以更改线条粗细
调整颜色值 (#222222) 以更改下划线颜色
适用于多行内联元素
适用于任何背景

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

Update: SASSY version

更新：SASSY 版本

I made a scss mixin for this. If you don't use SASS, the regular version above still works great...

我为此做了一个 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;
}

then use it like so:

然后像这样使用它：

$blue = #0054a6;
a {
    color: $blue;
    @include fake-underline(lighten($blue,20%));
}
a.thick {
    color: $blue;
    @include fake-underline(lighten($blue,40%), 86%, 99%);
}

Update 2: Descenders Tip

更新 2：下降提示

If you have a solid background color, try adding a thin text-strokeor text-shadowin the same color as your background to make the descenders look nice.

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

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.

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

Answer 6

回答by Dominic P

I know it's an old question, but for single line text setting display: inline-blockand then setting the heighthas worked well for me to control the distance between a border and the text.

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

Answer 7

回答by Michael Greisman

@last-child's answer is a great answer!

@last-child 的回答很好！

However, adding a border to my H2 produced an underline longer than the text.

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

If you're dynamically writing your CSS, or if like me you're lucky and know what the text will be, you can do the following:

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

change the contentto something the right length (ie the same
text) set the font color to transparent(or rgba(0,0,0,0))

更改为content正确长度的东西（即相同的
text) 将字体颜色设置为transparent(或rgba(0,0,0,0))

to underline <h2>Processing</h2>(for example), change last-child's code to be:

要下划线<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;
}

Answer 8

回答by Stardust

See my fiddle.

看我的小提琴。

You would need to use the border width property and the padding property. I added some animation to make it look cooler:

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

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>

Answer 9

回答by mcmimik

If you want:

如果你想：

multiline
dotted
with custom bottom padding
without wrappers

多行
点缀
带有自定义底部填充
没有包装

underline, you can use 1 pixel heightbackground image with repeat-xand 100% 100%position:

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

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

You can replace the second 100%by something else like pxor emto adjust the vertical position of the underline. Also you can use calcif you want to add vertical padding, e.g.:

您可以用100%其他类似的东西替换第二个px或em调整下划线的垂直位置。calc如果要添加垂直填充，也可以使用，例如：

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

Of course you can also make your own base64 png pattern with another color, height and design, e.g. here: http://www.patternify.com/- just set square width & height at 2x1.

当然，您也可以使用另一种颜色、高度和设计制作自己的 base64 png 图案，例如在这里：http: //www.patternify.com/- 只需将正方形宽度和高度设置为 2x1。

Source of inspiration: http://alistapart.com/article/customunderlines

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

Answer 10

回答by Daniel Hernandez

An alternative for multiline texts or links, you can wrap your texts in a span inside a block element.

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

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

then you can just add border-bottom and padding on the <span>.

然后你可以在<span>.

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

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

You may refer to this fiddle. https://jsfiddle.net/Aishaterr/vrpb2ey7/2/

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

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

提问by maxp

回答by chelmertz

回答by last-child

回答by Duc Huynh

回答by Jordan Starrk

回答by squarecandy

回答by Dominic P

回答by Michael Greisman

回答by Stardust

回答by mcmimik

回答by Daniel Hernandez

相关推荐

最近更新

标签

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

提问by maxp

回答by chelmertz

回答by last-child

回答by Duc Huynh

回答by Jordan Starrk

回答by squarecandy

回答by Dominic P

回答by Michael Greisman

回答by Stardust

回答by mcmimik

回答by Daniel Hernandez

相关推荐

CSS 你能在 :after 伪元素中添加换行符吗？

CSS 更改 selectOneMenu 样式表（Primefaces）

CSS 特异性：last-child

CSS 将按钮组的宽度设置为 100% 并使按钮等宽？

相关推荐

最近更新

标签