纯css实现中间文字两边有线

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

结束