html - 如何在CSS中指定文本装饰下划线的宽度

Question

CSS 中有属性“text-decoration: underline”。我遇到了一个实现，我只需放置一条文本宽度一半的线，并且下划线需要居中，如所附图像

如果有人告诉我如何在 CSS 中指定下划线的宽度或者如何实现该样式，那就太好了。

required style

Answer 1

您可以使用 :before 来执行此操作，它还允许您调整下划线的宽度并相应地设置其样式。

p {
font-size: 30px;
display: inline-block;
padding-bottom: 10px;
position: relative;
}

p:before {
content: "";
position: absolute;
width: 50%;
height: 1px;
bottom: 0;
left: 25%;
border-bottom: 1px solid #333;
}

<p>HEADLINE</p>