如何获得更粗的下划线？

Question

我有一些大胆的文字，并希望下划线也显示为粗体。

HTML

<p>Home Page</p>

CSS

p {
    text-decoration: underline;
}

jsFiddle

---

我尝试过几件事但是效果不好。

Answer 1

您可以将border-bottom用于填充：

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

JSFiddle

编辑：

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

Answer 2

一种可能的方法是使用伪元素:after来模仿边界。在这种情况下的好处是它易于控制和边界＆＃34;偏移margin-top。例如：

＆＃13;

＆＃13;

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

＆＃13;

<p>Home Page</p>

＆＃13;

＆＃13;

＆＃13;