效果是上面这样的,其实很简单就是在文字的伪类里面加横线就行了
<div class="title">
这里标题内容
</div>
.title{
width:200px;
height:50px;
line-height:50px;
text-align:center;
position:relative;
}
.title::after, .title::before{
position: absolute;
width:30px;
height:1px;
background:#000;
content:'';
top:25px;
}
.title::after{
left:0;
}
.title::before{
right:0;
}