经常遇到这种情况:
<span class="or">Snapshot</span>
css中:
首先
.or{display: block;position: relative;text-align: center;font-size: 20px;}//
/*设置为块级元素会独占一行形成上下居中的效果*/
加相对定位是为了:/*定位横线(当横线的父元素)*/
.or:before,.or:after{
content: "";/*CSS伪类用法*/
position: absolute;/*定位背景横线的位置*/
width:45%;/*宽和高做出来的背景横线*/
height:2px;
background:#CCCCCC;
top:15px;}
另外一种简单的办法:
<div class="line-left-right">分割线</div>
给这个.line-left-right设置:
.line-left-right{
padding:0 20px 0px;
margin:20px 0px;
line-height:1px;
border-left:100px solid red;
border-right:100px solid red;
text-align:center;
}