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

Question

我有一个居中的div,里面有嵌套的h1.有没有办法用比html默认值更粗的线来强调它？

Answer 1

这将使您可以控制U标记的下划线:

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

在这种情况下,下划线将是四个像素.

Answer 2

不，没有。下划线的粗细取决于浏览器，在 CSS（或 HTML）中不会受到影响。

text-underline-widthCSS3 文本草案中曾经建议过一个属性。但人们对其兴趣不足，于2005年从草案中删除，可能从未实施。

通常的解决方法是使用底部边框而不是下划线。但是，请注意，这是另一回事。底部边框位于行框下方，而下划线通常位于文本的基线上，因此会切断字母的下行部分。一般来说，底部边框比下划线更易于阅读，但它偏离了印刷传统。

以下示例演示了差异。

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

Answer 3

我不推荐使用内联 CSS，但为了简洁起见，我在这里使用了它：

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