底部边框比文本小

Question

我有这段html代码：

<h1>FROZEN</h1>

我希望为这个元素添加一个底部边框，像这样的边框： 最大宽度为150px。是否有任何css解决方案可以实现这一点？

- paulalexandru

---

你尝试过什么？从你的声誉来看，我猜你知道这是一个问题提得不好。你需要提供代码。一个解决方案可能是创建一个div来实现你想要的样式。 - keikoku92

请在此处放置您的代码。 - Mudassar Saiyed

Answer 1

您可以使用::after 来实现这个功能。

JSFiddle

CSS:

h1 {
    font-size:64px;
    position:relative;
    text-align:center;
}

h1::after {
    content:'';
    position:absolute;
    width:150px;
    height:1px;
    background:#000;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}

你可以使用float:left或float:right来使你的文本左对齐或右对齐，以你想要的方式。这样一来，你就不需要任何额外的HTML元素。

- Albzi

Answer 2

<h1>FROZEN</h1>
<hr width="150px" />

- Amanjot Kaur

---

人力资源部门将居中对齐吗？ - paulalexandru

是的，您也可以自己完成它，无论您想要左对齐、右对齐还是居中对齐。 - Amanjot Kaur

Answer 3

做这样的事情最好的方法是使用伪类，如::before和::after

Codepen演示

- Usman Arshad

Answer 4

最好的解决方案是使用HR标签并应用宽度。

<hr width="5%"/>

- Craigy Craigo

---

使用px而不是%更好，感谢@Amanjot Kaur的建议。 - Craigy Craigo