从开发人员在CSS中使用`text-decoration：underline;`来创建下划线时，是否可以更改为下划线高度？

Question

是否可以更改为开发人员在CSS中使用text-decoration: underline;创建下划线时的下划线高度？

使用CSS我创建了“about”这个词有'id'的'＃title4'有下划线，我想知道如何改变从下划线到单词的高度距离所以有一个更大的两者之间的差距？

我正在寻找的例子

#title4 {
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
text-decoration: underline;
}

Site code

Answer 1

遗憾的是，您无法控制文本之间的text-decoration高度和间距。所以我使用了border-bottom。希望这对你有帮助。

#title4 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-top: 5rem;
    border-bottom: 5px solid #000;
    display: inline-block;
    padding-bottom: 10px;
    font-family: sans-serif;
}

<h1 class="text-center" id="title4">About</h1>

Answer 2

text-decoration-thickness CSS 属性设置用于元素中文本的装饰线的粗细或宽度，例如下划线、下划线或上划线。

（Edge 87、Firefox 70、Safari 12、Chrome 87）

语法：auto |来自字体| |

例如

 .css_class
{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: solid;
  text-decoration-thickness: 5px;
}

<div class="css_class">Test</div>

Answer 3

没有。你不能这样做，但有一个解决办法。

如果你这样做：#tile4 {border-bottom: 2px; solid #CCC; padding-bottom: 4px} 所以基本上，你的底部边框成为你的下划线＆＃39;。

你可以将填充底部调整到你想要的任何颜色和实际下划线的宽度。

Answer 4

我们可以使用 background 代替 border 或 text-decoration 来实现完全控制。

span {
  --color: red;
  --position: center bottom;
  --width: 50px;
  --height: 5px;
  background: linear-gradient(var(--color), var(--color)) var(--position) / var(--width) var(--height) no-repeat;
  padding-bottom: 10px;
  font: bold 2.5rem sans-serif;
}

<span>ABOUT</span>

Answer 5

我迟到了，但这对某人仍然有用。 通过使用 text-underline-offset: ...px，您可以更改它们之间的差距。

Answer 6

这应该做你想要的。尝试使用border-bottom，如下所述：

https://css-tricks.com/styling-underlines-web/

希望这会对你有所帮助。

Answer 7

您可以使用伪元素

#title4 {
position: relative;
font-size: 2.5rem;
font-weight: 700;
margin-top: 5rem;
padding-bottom: 15px;}

#title4:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
margin: 0 auto;
height: 3px;
background: #000;}