经常遇到这种情况：

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

另外一种简单的办法：

    
     分割线
    

给这个.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;}