本文再介绍一种关于文字与横线的关系，中间文字，两侧横线，主要方法：CSS伪类before，after制作左右横线中间文字效果
HTML：
WelcometoSnapshot
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%;
}
