有没有办法使HTML下划线更粗？

Question

我有一个居中的div，里面嵌套了一个h1标签。是否有办法用比html默认更粗的线条给它加下划线？

- Rodrigo

Answer 1

这将使你能够控制U标签的下划线：

<style type="text/css">
  u {
    text-decoration: none;
    border-bottom: 4px solid black;
  }
</style>

在这种情况下，下划线将是四个像素。

- Gert Grenander

---

这与下划线不同。下划线会画在字形基线以下，并会“穿过”'y'、'g'等字符的下行部分。边框底部不是这种情况。 - mrec

Answer 2

没有，下划线的粗细取决于浏览器，并且不能通过CSS（或HTML）进行调整。

在CSS3文本草案中曾经提出过一个text-underline-width属性。但是由于缺乏足够的兴趣，它于2005年被从草案中删除。它可能从未被实现过。

通常的解决方法是使用底部边框代替下划线。然而，要注意这是两个不同的东西。底部边框在行框下方，而下划线通常在文本基线上，因此会切断字母的下降部分。一般来说，底部边框比下划线更易读，但它偏离了排版传统。

以下示例演示了区别。

<span style="text-decoration: underline">jgq</span>
<span style="border-bottom: solid 1px">jgq</span>
<span style="border-bottom: solid 4px">jgq</span>

- Jukka K. Korpela

Answer 3

我不建议使用内联CSS，但为了简洁起见，在此处使用了它。

<h1 style="border-bottom: 5px solid black">

- D'Arcy Rittich

Answer 4

是的，这是可能的。添加此属性以设置您想要的厚度。

text-decoration-thickness: 5px;

- Vignesh Sk

Answer 5

您可以通过设置border-bottom-width属性来实现相同的视觉效果；

h2
{
  border-bottom-color:black;
  border-bottom-style:solid;
  border-bottom-width:15px;
}

- Matthew Vines

---

好的，但必须警告用户在此代码中指定h2标签，而不是让它适用于HTML文件中的任何h2。 - NoChance

Answer 6

由于您并不总是想要 border-bottom（例如，项目可能具有填充，这样会显得太远），因此此方法最为有效：

h1:after {
    content: '';
    height: 1px;
    background: black; 
    display:block;
}

如果您想要更粗的下划线，请增加height。

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

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

- jake