边框底部比文字小

Question

我有这个HTML代码：

<h1>FROZEN</h1>

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

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

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元素。

Answer 2

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

Answer 3

执行此类操作的最佳方法是使用伪{类::before ::after等类Codepen Demo

Answer 4

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

<hr width="5%"/>