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

Question

我喜欢听话的朋友开发人员必须使用 2px 填充而不是默认情况下 1px 来创建下划线。 是否存在简单的解决方案？

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

Answer 1

您可以将文本包裹在一个span并使用padding-bottom:2px;为其设置一个border-bottom padding-bottom:2px; .

像这样

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

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

Answer 2

在不添加额外跨度并拥有更多控制权的情况下执行此操作的一个好方法是使用: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;
}

Answer 3

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

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

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

Answer 4

只需使用：

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

Answer 5

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

Answer 6

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

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

---

只是使用

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

Answer 7

这是我的解决方案...

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

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

这将为您保持水平对齐。

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

 <span>Hello there</span>

Answer 10

尝试这个：

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