Question

我喜欢一个服从的frotend开发者必须使用2px填充而不是1px默认创建下划线。存在简单的解决方案吗？

PS Yeahh伙计们，我知道有黑色背景颜色的div和1px * Npx和位置：相对，但它太慢......

Answer 1

您可以将文字打包在span中，并使用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-offset 而不是 text-underline-position，因为 iOS Safari 不支持 text-underline-position

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

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

Answer 4

如何使用border-bottom:1px; padding:what-you-likepx

Answer 5

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

Answer 6

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

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

我通过这样做来修复它：

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 7

您可以使用:: 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 8

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

尝试一下：

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

Answer 10

只需使用：

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

如何进行文本修饰：使用2px填充下划线？

10 个答案: