html - 行文本行设置代码

Question

我在设置我的 html 和 css 来模仿这张图片时遇到了问题， .关于如何设置它以使其线条、文本、线条都在同一垂直线上的任何提示？

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;
}

还有你的h3在你的 HTML 中我添加了 <div class="line"></div>

例如:

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

再次 更改 top的 .line到您需要的数量，连同 background-color :)