如何在CSS中指定文字装饰底线的宽度

Question

CSS中有“文本装饰：下划线”属性。我遇到了一个实现，在该实现中，我只需要在文本宽度的一半处放置一行，并在下划线处居中，如所附图片

如果有人告诉我如何在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>