如何在左侧和右侧放置带水平线的标题文本CSS中的右侧

Question

我想要这样的设计;

我这样写了我的CSS：

 在这打字

.my-title:before,
.my-title:after {
    background-color: #CCCCCC;
    content: "";
    display: inline-block;
    height: 2px;
    position: relative;
    vertical-align: middle;
    width: 32%;
    margin-left: -2%;
}
}

这在当地似乎是正确的，但由于最终的支撑它在生产中给出错误。 如何使用更简单的CSS，以便我可以获得所需的设计！

Answer 1

DEMO

HTML

<div class="maintext">
<div class="subtext">
 <h2>Text Here</h2>
</div>
</div>

CSS

.maintext{
    width:100%;
    height:1px;
    border-top:2px solid #6b6a6a;
    position:relative;
    margin-bottom:30px;
    }
.subtext{
    width:auto;
    height:auto;
    text-align:center;
    position:absolute;
    top:-15px;
    right:0;
    left:0;
    }
.subtext h2{
    padding:7px 12px;
    background:#ffffff;
    display:inline;
    color:#000000;
    font-family: 'Georgia';
    font-size:30px;
    }

Answer 2

将您的代码更改为此

将position:relative添加到.my-title

.my-title:before{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    right:100%;
    marging:-1px 0 0;
}

.my-title:after{
    background-color: #CCCCCC;
    content: "";
    display: block;
    height: 2px;
    width: 100px;
    position: absolute;
    top:50%;
    left:100%;
    marging:-1px 0 0;
}