边框底部小于文本[重复]答案

【问题标题】：Border bottom smaller than the text [duplicate]边框底部小于文本[重复]
【发布时间】：2015-06-02 11:12:40
【问题描述】：

我有这个 html 代码：

<h1>FROZEN</h1>

我想要这个元素的边框底部，一个看起来像这样的边框：

最大 150 像素宽度的边框。是否有任何 css 解决方案来实现这一目标？

【问题讨论】：

你试过什么？从您的声誉来看，我猜您知道这是一个问得不好的问题。您需要提供代码。一种解决方案可能是创建一个 div 来做你想要的样式
把你的代码放在这里..

标签： html css border

【解决方案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 元素。

【讨论】：

【解决方案2】：

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

【讨论】：

hr 将居中对齐？
是的，你也可以自己做，不管你想左对齐、右对齐还是居中对齐。

【解决方案3】：

执行此类操作的最佳方法是使用 ::before ::after 之类的伪类

Codepen Demo

【讨论】：

【解决方案4】：

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

<hr width="5%"/>

【讨论】：

感谢@Amanjot Kaur，使用 px 而不是 % 是一个更好的主意。