如何使用 2px 填充来制作文本装饰：下划线？答案

【问题标题】：How make text-decoration: underline with 2px padding?如何使用 2px 填充来制作文本装饰：下划线？
【发布时间】：2011-12-23 16:17:51
【问题描述】：

我喜欢一个听话的前端开发者必须创建带有 2px 填充而不是默认 1px 的下划线。是否存在简单的解决方案？

PS 是的，伙计们，我知道带有黑色背景颜色和 1px * Npx 和 position: relative 的 div，但是它太慢了......

【问题讨论】：

CSS3 现在有很多新的文本装饰属性。请查看alligator.io/css/text-decoration 示例：'text-decoration-position: under;' 和 'text-decoration-skip: ink;' 请注意，这可能与旧版浏览器不向后兼容。

标签： html css

【解决方案1】：

您可以将文本包装在 span 中，并使用 padding-bottom:2px; 给它一个 border-bottom。

像这样

span{
    display:inline-block;
    border-bottom:1px solid black;
    padding-bottom:2px;
}

示例：http://jsfiddle.net/uSMGU/

【讨论】：

使用这个解决方案你不能使填充 2px，只有 3 个或更多；-(
不确定@NiLL 是什么意思？你能更具体地说明你不能做什么吗？
在 CSS 中存在属性，- text-decoration:underline。它在文本下方画线，填充 1px。我需要相同的效果，但需要 2px。
我的理解是你不能改变text-decoration的默认值。这就是为什么您需要像我建议的那样的解决方法。
嗨，<li> 元素是如何工作的？当我将其更改为<li> 时，整行都带有下划线。我只想在<li></li> 标记之间显示的文本下划线。而且，我还必须删除display 设置，否则项目符号不会出现。

【解决方案2】：

对于交叉浏览，最好使用text-underline-offset 而不是text-underline-position，因为text-underline-position 不支持iOS Safari

所以使用这个答案：https://stackoverflow.com/a/63607426/1894907

#line{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

【讨论】：

【解决方案3】：

使用:after 选择器是一种无需添加额外跨度并拥有更多控制权的好方法。

对导航菜单特别有用：

.active a:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

如果您希望文本和下划线之间有更多或更少的空间，请添加margin-top。

如果你想要更粗的下划线，添加更多height：

.active a:after {
    content: '';
    height: 2px;
    background: black; 
    display:block;
    margin-top: 2px;
}

【讨论】：

这很好，但我注意到它破坏了与 flexbox 的水平居中对齐，因为它增加了项目的高度。
我在这里添加了一个答案，我的解决方案可以解决水平对齐问题。

【解决方案4】：

简单使用：

text-decoration: underline;
text-underline-position: under;

【讨论】：

OS Safari 不支持 text-underline-position：developer.mozilla.org/en-US/docs/Web/CSS/… 用于跨浏览最好使用 text-underline-offset

【解决方案5】：

#line{
    text-decoration-line: underline;
    text-underline-offset: 1px;
}

<div id="line">
Text with line
</div>

随便用

{
    text-decoration-line: underline;
    text-underline-offset: 2px;
}

【讨论】：

欢迎来到 Stack Overflow。 Stack Overflow 上不鼓励仅使用代码的答案，因为它们没有解释它是如何解决问题的。请编辑您的答案，以解释此代码的作用以及它如何改进该问题已有的许多其他赞成的答案，以便对其他有类似问题的用户有用。

【解决方案6】：

使用border-bottom:1px; padding:what-you-likepx怎么样

【讨论】：

【解决方案7】：

This 是我的解决方案...

HTML

<p>hola dasf  hola dasdsaddasds dsadasdd<span></span></p>

CSS

p {
  color: red;
  text-decoration: none;
  position: absolute;
}
a:hover {
    color: blue;
}
p span {
    display:block;
    border-bottom:3px solid black;
    width: 50%;
    padding-bottom: 4px;
}

【讨论】：

【解决方案8】：

我使用了@jake 的解决方案，但它给我的水平对齐带来了麻烦。

我的导航链接是 flex 行，居中对齐，他的解决方案导致元素向上移动以保持水平居中对齐。

我通过这样做修复了它：

a.nav_link-active {
  color: $e1-red;
  margin-top: 3.7rem;
}
a.nav_link-active:visited {
  color: $e1-red;
}
a.nav_link-active:after {
  content: '';
  margin-top: 3.3rem;      // margin and height should
  height: 0.4rem;          // add up to active link margin
  background: $e1-red;
  display: block;
}

这将为您保持水平对齐。

【讨论】：

【解决方案9】：

您可以使用 ::after 元素稍作修改，然后手动定位它们。这确实意味着您必须维护 after 元素的 content 属性，但您可以通过在 html 标记中使用 data 属性并引用它来简化此操作。请参阅下面的示例 -

span:after {
    font-size: 1rem;
    position: absolute;
    content: 'Hello there..';
    width: 100%;
    height: 100%;
    white-space: pre;
    text-decoration-skip-ink: none;
    text-decoration-line: underline;
    left: 0px;
    top: 10px;
    color: white;
    z-index: -1;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: black;
}

span {
  position: relative;
}

&lt;span&gt;Hello there&lt;/span&gt;

【讨论】：

【解决方案10】：

试试这个：

.yourElement{
border-bottom: 1px solid #000;
line-height: 2;
}

【讨论】：