样式较粗的下划线 CSS
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15058525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Style thicker underline CSS
提问by Hyman Guy
I wanted to add a thicker underline to my h1 tags so I used "border-bottom" as suggested in multiple Stack Overflow questions. However, the border extended well beyond the text, so I decided to add the display property "inline-block" to make the border conform to the text's bounds. This, however, made the element lack a line break after the content. I know I could always add the "br" tag, but I'd prefer to keep that in my styling. Is there anything I can do? Here is my current CSS:
我想为我的 h1 标签添加一个更粗的下划线，所以我在多个 Stack Overflow 问题中建议使用“border-bottom”。但是，边框远远超出了文本，因此我决定添加显示属性“inline-block”以使边框符合文本的边界。然而，这使得元素在内容之后缺少换行符。我知道我总是可以添加“br”标签，但我更愿意在我的样式中保留它。有什么我可以做的吗？这是我当前的 CSS：
h1
{
font-weight:normal;
margin-bottom:5px;
border-bottom: 2px solid;
display: inline-block;
}
回答by cimmanon
Try display: tableinstead. It acts similar to inline-block in that it collapses down to to the width of its children, but prevents surrounding inline elements from flowing along side of it the same way an ordinary block element does.
试试吧display: table。它的作用类似于 inline-block ，因为它折叠到其子元素的宽度，但防止周围的内联元素像普通块元素一样沿着它的一侧流动。
回答by ThinkingStiff
If the width of your <h1>text is fixed, you can set the widthand keep it display: block;.
如果您的<h1>文本宽度是固定的，您可以设置width并保留它display: block;。
Demo:
演示：
Output:
输出：
CSS:
CSS：
h1 {
border-bottom: 2px solid black;
font-weight:normal;
margin-bottom:5px;
width: 140px;
}
HTML:
HTML：
<h1>underlined</h1>
next line
回答by jake
Since you don't always want border-bottom (eg, navigation item with padding), this method works better:
由于您并不总是想要边框底部（例如，带有填充的导航项），因此此方法效果更好：
h1:after {
content: '';
height: 1px;
background: black;
display:block;
}
If you want more or less space between the text and the underline, add a margin-top.
如果您希望文本和下划线之间有更多或更少的空间，请添加margin-top.
If you want a thicker underline, add more height:
如果您想要更粗的下划线，请添加更多height：
h1:after {
content: '';
height: 2px;
background: black;
display:block;
margin-top: 2px;
}
