Css3中间文本两侧横线

<style>
.title{
	text-align: center;
	font-size: 28px;
	margin: 24px 0;
	display: flex;/*弹性布局*/
}
.title .title_name{
	padding: 0 20px;
}
.title .line{
	background:linear-gradient(
     transparent 49%,
     #000 49%,
     #000 51%,
     transparent 51%
		);
	flex:1;/*均分父级元素、父级元素定义display:flex,子元素宽度用flex来定义各占一半*/
}
</style>

<h2 class="title">
  		<span class="line"></span>
  		<span class="title_name">文本信息</span><!--可以随意增加字-->
  		<span class="line"></span>
  	</h2>

代码解析：

background:linear-gradient();线性渐变
background:linear-gradient(
to top,<!--从下到上、to bottom 从上到下(默认) to left 右到左 to right从左往右-->
red 20%,
green 70%,
blue 90%
);
background:linear-gradient(
     red 20%,
     green 20%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡。
     green 90%,
     black 51%
);
接下来：
background:linear-gradient(
     tansparent 49%,红色这里改成透明 红色占49%
     green 49%,如果当前颜色承接了上个颜色的百分比（距离），就不会产生过渡
     green 51%,中间绿色就只占2%（51-49）
     transparent 51% 再把最后一个颜色改成transparent 中间就只剩下绿色了。黑色51% 
)