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

【问题标题】：Is it possible to change to the underline height from when the developer uses `text-decoration: underline;` in CSS to create an underline?开发人员在 CSS 中使用 `text-decoration: underline;` 创建下划线时，是否可以更改为下划线高度？
【发布时间】：2022-02-14 20:47:37
【问题描述】：

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

使用 CSS 我让“id”为“#title4”的单词“about”有一个下划线，我想知道如何更改从下划线到单词的高度距离，以便更大两者之间的差距？

我正在寻找的示例

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

Site code

【问题讨论】：

标签： html css

【解决方案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;
}

&lt;h1 class="text-center" id="title4"&gt;About&lt;/h1&gt;

【讨论】：

现在可以在最近浏览器上使用text-decoration-thickness 和text-underline-offset

【解决方案2】：

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

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

语法：自动 |从字体 | |

例如

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

&lt;div class="css_class"&gt;Test&lt;/div&gt;

【讨论】：

也可以使用text-underline-offset来设置单词和下划线之间的分隔空间

【解决方案3】：

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

【讨论】：

【解决方案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;
}

&lt;span&gt;ABOUT&lt;/span&gt;

【讨论】：

【解决方案5】：

做到这一点，就是这样。

#explore{
        background-color: #5C6BC0;
        width: 80px;
        height: 8px;
        margin: auto;
        display: block;
        margin-top: 10px;
    }
    
    .text{
    text-align:center;
    }

&lt;h1 class="text"&gt;Explore&lt;span id="explore"&gt;&lt;/span&gt;&lt;/h1&gt;

【讨论】：

【解决方案6】：

这应该可以满足您的需求。尝试使用border-bottom，如下所述：

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

希望对你有所帮助。

【讨论】：

【解决方案7】：

没有。你不能这样做，但有一种解决方法。

如果你像这样：#tile4 {border-bottom: 2px; solid #CCC; padding-bottom: 4px} 所以基本上，你的底部边框变成了你的“下划线”。

您可以根据需要调整底部填充，实际下划线的颜色和宽度也是如此。

【讨论】：

【解决方案8】：

你可以使用伪元素

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

【讨论】：

【解决方案9】：

是的，有可能

只需添加以下 css 代码

    text-decoration: underline;
    text-decoration-color: #0000ff;
    text-decoration-thickness: 3px; // underline thickness
    -moz-text-decoration-color: #0000ff;
    text-underline-offset: 20px; // height of underline from text

【讨论】：