行文本行设置代码

Question

我一直无法设置我的html和css来模仿这张图片，。有关如何设置的任何提示，所以它的Line，Text，Line都在同一垂直线上？

Answer 1

使用:before/:after和top定位

修改

查看最新更新的JSFiddle。

我补充说：

*,
*:before,
*:after
{
    position: relative;
}
.line:after
{
    position: absolute;
    top: 49px;
    left: 0;
    content: "";
    height: 1px;
    width: 100%;
    background-color: blue;
}
.line h3
{
    z-index: 1;
    display: block;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    background-color: #d1d1d1;
}

在您的HTML h3附近，我添加了<div class="line"></div>

例如：

<div class="line">
    <h3><span style='color: #ff6c00;'>About</span> Me</h3>
</div>

<强> AGAIN 将top的{​​{1}}更改为您需要的金额以及.line：）