利用元素伪类实现文字居于横线中间

<divclass="login-block">

<divclass="login-block-l">

<divclass="block-l-hey">Hey!</div>

<divclass="block-l-tip">欢迎回到XXX俱乐部！</div>

<divclass="block-l-title"><div>注册即享3重福利</div></div>

</div>

<divclass="login-block-r">

</div>

</div>

//样式

.block-l-title{

position:absolute;

text-align:center;

min-width:370px;

top:427px;

left:57px;

}

/*CSS伪类用法*/

.block-l-titlediv{

font-size:16px;

font-weight:400;

line-height:18px;

/*color:rgba(255,255,255,1);*/

opacity:1;

}

.block-l-titlediv:after, .block-l-titlediv:before{

background:#000000;

content:"";

height:1px;

position:absolute;

top:50%;

width:31%;

}

/*调整背景横线的左右距离*/

.block-l-titlediv:before{

left:0;

}

.block-l-titlediv:after{

right:0;

}