CSS 控制文本装饰上的下划线位置：underline

Control underline position on text-decoration: underline

提问by redconservatory

Is there a way to control the position of the underline in text-decoration: underline?

有没有办法控制 text-decoration: underline 中下划线的位置？

<a href="#">Example link</a>

The example above has an underline by default...is there a way to nudge that underline down by a few pixels so that there is more space between the text and the underline?

上面的示例默认有一个下划线……有没有办法将下划线向下轻推几个像素，以便文本和下划线之间有更多空间？

回答by Ry-

The only way to do that is to use a border instead of an underline. Underlines are notoriously inflexible.

唯一的方法是使用边框而不是下划线。下划线是出了名的不灵活。

a {
    border-bottom: 1px solid currentColor; /* Or whatever color you want */
    text-decoration: none;
}

Here's a demo.If that's not enough space, you can easily add more — if it's too much, that's a little less convenient.

这是一个演示。如果空间不够，您可以轻松添加更多空间 - 如果空间过多，则不太方便。

回答by Bryan Willis

You can use pseudo before and after like this. It works well and is completely customizable.

您可以像这样在前后使用伪。它运行良好并且完全可定制。

CSS

CSS

p {
  line-height: 1.6; 
}
.underline {
   text-decoration: none; 
   position: relative; 
 }   

.underline:after {
    position: absolute;
    height: 1px;
    margin: 0 auto;
    content: '';
    left: 0;
    right: 0;
    width: 90%;
    color: #000;
    background-color: red;
    left: 0;
    bottom: -3px; /* adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot. */
}

HTML

HTML

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" class="underline">visit the bookshop</a> to read example text later.</p>

Here's a more advanced demo with a screenshot attached I made that animates the underline onhovering, changes colors, etc...

这是一个更高级的演示，附有我制作的屏幕截图，可以在悬停、更改颜色等时为下划线设置动画...

http://codepen.io/bootstrapped/details/yJqbPa/

http://codepen.io/bootstrapped/details/yJqbPa/

回答by Jukka K. Korpela

There is the proposed text-underline-positionproperty in CSS 3, but it seems that it has not been implemented in any browser yet.

text-underline-positionCSS 3 中有提议的属性，但似乎还没有在任何浏览器中实现。

So you would need to use the workaround of suppressing the underline and adding a bottom border, as suggested in other answers.

因此，您需要按照其他答案中的建议，使用抑制下划线和添加底部边框的解决方法。

Note the the underline does not add to the total height of an element but bottom border does. In some situations, you might wish to use outline-bottom– which does not add to the total height – instead (though it is not as widely supported as border-bottom).

请注意，下划线不会增加元素的总高度，但底部边框会增加。在某些情况下，您可能希望使用outline-bottom- 这不会增加总高度 - 而是（尽管它不像 那样受到广泛支持border-bottom）。

回答by Jinu Kurian

There is one property text-underline-position: under. But only supported in Chrome and IE 10+.

有一个属性text-underline-position: under。但仅支持 Chrome 和 IE 10+。

More info: https://css-tricks.com/almanac/properties/t/text-underline-position/https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

更多信息：https: //css-tricks.com/almanac/properties/t/text-underline-position/ https://developer.mozilla.org/en-US/docs/Web/CSS/text-underline-position

回答by Julien

Use a border-bottom instead of the underline

使用边框底部而不是下划线

a{    
    border-bottom: 1px solid #000;
    padding-bottom: 2px;
}

Change padding-bottom to adjust the space

更改 padding-bottom 以调整空间

回答by Dorian

Using border-bottom-widthand border-bottom-stylewill make the border the same color of the text by default:

默认情况下，使用border-bottom-width和border-bottom-style将使边框与文本颜色相同：

text-decoration: none;
border-bottom-width: 1px;
border-bottom-style: solid;
padding-bottom: 1px;

回答by ericek111

There is the text-underline-offsetproperty in CSS Text Decoration Module Level 4which allows you to move the decoration by a specified distance away from its original position.

CSS Text Decoration Module Level 4 中有一个text-underline-offset属性，它允许您将装饰从其原始位置移动指定的距离。

As of early 2020, this is only supported in Safari 12.1+ and Firefox 70+.

截至 2020 年初，仅 Safari 12.1+ 和 Firefox 70+ 支持此功能。

text-underline-offsetproperty accepts these values:

text-underline-offset属性接受以下值：

• auto- default, makes the browser choose the appropriate offset.
• from-font- if the used font specifies a preferred offset, use that, otherwise it falls back to auto.
• <length>- specify distance in the "usual" CSS length units. Use emto allow scaling proportionally with the font-size.

• auto- 默认，使浏览器选择合适的偏移量。
• from-font- 如果使用的字体指定了首选偏移量，则使用该偏移量，否则返回到auto.
• <length>- 以“通常的”CSS 长度单位指定距离。使用em允许与比例缩放font-size。

Example below:

下面的例子：

p {
  text-decoration: underline;
  text-decoration-color: red;
  margin-bottom: 1.5em;
}

p.test {
  position: relative;
}

p.test::after {
  position: absolute;
  content: '';
  display: block;
  height: 1px;
  width: 100%;
  background: blue;
  bottom: 0;
}

<p style="text-underline-offset: 0.75em;" class="test">
  If you see our red underline <strong>below</strong> the blue line, this property works in your browser.
</p>

<p style="text-underline-offset: auto">
  And now let's try it with `text-underline-offset` set to `auto`.
</p>

<p style="text-underline-offset: from-font">
  With `text-underline-offset` set to `from-font`, it probably looks the same as above.
</p>

回答by mikevoermans

I would use border instead. Easier to control that.

我会用边框代替。更容易控制。