Question

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

Answer 1

这样您就可以控制U标记的下划线：

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

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

Answer 2

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

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

Answer 3

不，没有。下划线的粗细与浏览器有关，不能在CSS（或HTML）中受到影响。

CSS3 Text草案中曾建议使用text-underline-width属性。但是对它没有足够的兴趣，它在2005年从草案中删除了。它可能从未实施过。

通常的解决方法是使用底部边框而不是下划线。但请注意，这是另一回事。底部边框位于线框下方，而下划线通常位于文本的基线上，因此会切割字母的下划线。一般来说，底部边框比下划线更易于辨认，但它与排版传统不同。

以下示例演示了差异。

＆＃13;

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

＆＃13;

Answer 4

您可以使用border-bottom-width实现相同的视觉效果;

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

Answer 5

由于你并不总是想要边框底部（例如，项目可能有填充，它会显得太远），这种方法效果最好：

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

如果您想要更粗的下划线，请添加更多height

如果您想在文字和下划线之间留出更多或更少的空格，请添加margin-top：

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

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

5 个答案: