css - 样式加粗下划线 CSS

Question

我想为我的 h1 标签添加更粗的下划线，所以我使用了多个 Stack Overflow 问题中建议的“border-bottom”。然而，边框远远超出了文本，所以我决定添加显示属性“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

由于您并不总是想要底部边框（例如，带有填充的导航项），因此此方法效果更好：

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

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

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

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