样式加粗下划线 CSS答案

【问题标题】：Style thicker underline CSS样式加粗下划线 CSS
【发布时间】：2023-04-04 16:04:02
【问题描述】：

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

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

【问题讨论】：

只需将 H1 标签包装在块元素中，例如 DIV。或者把它后面的内容放在一个块元素中...
看看 CSS 盒子模型 (w3.org/TR/CSS2/box.html)。通常，如果您删除所有填充并增加边距，边框将与文本匹配得更好。我知道这并不能完全回答问题，而是一个不同的解决方案。

标签： css underline

【解决方案1】：

改用display: table。它的作用类似于 inline-block，因为它会向下折叠到其子元素的宽度，但会像普通块元素一样防止周围的内联元素沿着它的侧面流动。

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

【讨论】：

谢谢。 CSS 纯粹主义者会追我的血吗？
@J4G 他们不应该这样。 display: table != <table>.
这让我免于痛苦。谢谢！

【解决方案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

【讨论】：

【解决方案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;
}

【讨论】：