样式更粗的下划线CSS

Question

我想为h1标签添加更粗的下划线，因此我在多个Stack Overflow问题中建议使用“border-bottom”。但是，边框扩展到文本之外，因此我决定添加display属性“inline-block”以使边框符合文本的边界。然而，这使得元素在内容之后缺少换行符。我知道我总是可以添加“br”标签，但我更愿意将其保留在我的造型中。有什么我能做的吗？这是我目前的CSS：

h1
{
    font-weight:normal;
    margin-bottom:5px;
    border-bottom: 2px solid;
    display: inline-block;
}

Answer 1

请尝试使用display: table。它的行为类似于inline-block，因为它向下折叠到子节点的宽度，但是防止周围的内联元素沿着它的侧面流动，就像普通的块元素一样。

http://codepen.io/cimmanon/pen/FvGxl

Answer 2

如果<h1>文字的宽度已修复，您可以设置width并保留display: block;。

演示：

输出：

  

CSS：

h1 {
    border-bottom: 2px solid black;
    font-weight:normal;
    margin-bottom:5px;
    width: 140px;
}

HTML：

<h1>underlined</h1>
next line

Answer 3

由于您并不总是想要使用border-bottom（例如，带有填充的导航项），因此此方法效果更佳：

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

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

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

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