边框底部小于文本

Question

我有这个 html 代码：

<h1>FROZEN</h1>

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

最大 150 像素宽度的边框。有什么 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

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

<hr width="5%"/>

Answer 3

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

Answer 4

最好的方法是使用伪类，比如::before ::after

Codepen Demo

边框底部小于文本

Border bottom smaller than the text

html

css

border