【问题标题】：Control underline position on text-decoration: underline控制文本装饰上的下划线位置：下划线
【发布时间】：2012-03-24 02:27:27
【问题描述】：

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

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

上面的例子默认有下划线...有没有办法将下划线向下微调几个像素，以便在文本和下划线之间留出更多空间？

【问题讨论】：

标签： css underline

【解决方案1】：

2021

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

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

text-underline-offset 属性接受这些值：

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

以下示例：

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>

【讨论】：

chrome 仍然不支持

【解决方案2】：

2021

你可以使用text-underline-position: under;

<body>
   <h1>
     <a href="#"
       style="text-decoration: underline; text-underline-position: under;" >
      My link</a>
   </h1>
</body>

【讨论】：

【解决方案3】：

2020

使用text-underline-offset！

2012

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

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

Here's a demo. 如果空间不够，您可以轻松添加更多空间——如果太多，那就不太方便了。

【讨论】：

值得注意的是border 不像underline 那样换行。
@Blowsie：它适用于inline 元素；尝试在小提琴中调整框架的大小。
请注意，它也会在 :before 和 :after 下划线。
在大多数情况下这是最简单的解决方案，但是当您希望大的 line-height 具有大的点击目标（例如在菜单中）但不想推送“下划线”（边框）如下。然后，text-underline-position 或 :after 解决方案效果最佳。
@YannDìnendal：我不确定text-underline-position 是如何工作的，因为它是关于下划线出现在文本的哪一侧......但是是的，如果你只有一行文本你可以使用::after。一种允许换行符和大点击目标但可能需要更多标记的解决方案是将带下划线的文本放在垂直居中的包装器中。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

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

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

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

【讨论】：

如果您需要整个
元素下划线和 white-space:wrap 启用，这不起作用
如果您的锚链接跨越多行，即使它本身没有其他内容，这也将不起作用。不过，感谢您的替代想法。
我将它用于标题下划线动画，通过使用响应式 css 单元进行了较少的修改。
如果您的文本需要有很多填充并且您不能放置额外的 html 元素来包装您的文本，那么也将不起作用。只是想一想。

【解决方案6】：

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

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

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

【讨论】：

那只允许将线放在另一边，但不能改变文本和线之间的距离。

【解决方案7】：

使用border-bottom-width 和border-bottom-style 会使边框默认与文本颜色相同：

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

【讨论】：

【解决方案8】：

使用底部边框代替下划线

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

改变 padding-bottom 来调整空间

【讨论】：

【解决方案9】：

我会改用边框。更容易控制。

【讨论】：