两边文字、中间横线的CSS写法
本文再介绍一种关于文字与横线的关系，中间文字，两侧横线，主要方法：CSS伪类before，after制作左右横线中间文字效果
HTML：
<divclass="container"><h3class="title">Welcometo<span>Snapshot</span></h3></div>
CSS：
.container{width:800px;margin:10pxauto;border:1pxsolidred;}h3.title{color:#F2AE11;font-size:1.3em;margin-bottom:3em;text-align:center;font-weight:500;line-height:1.1;}h3.titlespan{display:block;/*设置为块级元素会独占一行形成上下居中的效果*/font-size:3em;color:#212121;position:relative;/*定位横线（当横线的父元素）*/}h3.titlespan:before,h3.titlespan:after{content:\;/*CSS伪类用法*/position:absolute;/*定位背景横线的位置*/top:52%;background:#494949;/*宽和高做出来的背景横线*/width:29%;height:2px;}h3.titlespan:before{left:5%;/*调整背景横线的左右距离*/}h3.titlespan:after{right:5%;}
