纯css实现中间文字两边有线 中间字多时也没问题
效果图如下:
说明一下:
伪元素:after before 改变宽度时,对应的right left值也要改
after: width right -> 宽度width加多少 right也要加多少
before: width left -> 宽度width加多少 left也要加多少
结构如下:
<div class="operLine">
<span class="line">啊</span>
</div>
<div class="operLine">
<span class="line">啊哦</span>
</div>
<div class="operLine">
<span class="line">啊哦额</span>
</div>
<div class="operLine">
<span class="line">啊哦额依屋语波坡摸佛</span>
</div>
样式如下:
.operLine{
width:100%;
height:40px;
text-align:center;
line-height:40px;
margin:10px auto;
}
.operLine .line{
position:relative;
display:inline-block;
padding:0px 30px;
}
.operLine .line::after{
content:'';
width:40px;
position:absolute;
top:20px;
right:-20px;
border-bottom:1px solid black;
}
.operLine .line::before{
content:'';
width:40px;
position:absolute;
top:20px;
left:-20px;
border-bottom:1px solid red;
}
结束