如何获得更粗的下划线？ [复制]答案

【问题标题】：How can I get a thicker underline? [duplicate]如何获得更粗的下划线？ [复制]
【发布时间】：2015-02-07 12:44:47
【问题描述】：

我有一些粗体文本，我想用下划线显示粗体。

HTML

<p>Home Page</p>

CSS

p {
    text-decoration: underline;
}

我尝试了几件事，但效果不佳。

【问题讨论】：

你试过border-bottom吗？
@Jukka K. Korpela 该答案的解决方案对我不起作用，这不是所需的结果
这个问题有大量重复，大部分没有正确答案，即“你不能”，并建议了不同的解决方法。如果您指的是变通办法的问题，您需要准确指定您尝试了什么以及它是如何失败的。您可能应该在一个新问题中这样做，在检查一个基本相似的问题没有被问和回答之后。
@Vader 您应该接受其中一个答案，尤其是因为其中一个答案比您原来的问题更适合。

标签： html css

【解决方案1】：

您可以使用带有一些填充的border-bottom：

display:inline-block;
border-bottom:solid 2px red;
padding-bottom:2px;

编辑：

为了达到你想要的效果，你可以用<span>包裹文字：JSFiddle

【讨论】：

【解决方案2】：

一种可能的方法是使用伪元素:after 来模拟边框。在这种情况下的好处是使用margin-top 很容易控制“边界”偏移。例如：

p {
    display: inline-block;
}
p:after {
    content: '';
    display: block;
    height: 2px;
    background: red;
    margin-top: -1px;
}

&lt;p&gt;Home Page&lt;/p&gt;

【讨论】：