用css伪类：before,:after前后插入线

2019独角兽企业重金招聘Python工程师标准>>>

经常遇到这种情况：

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

 

转载于:https://my.oschina.net/yanyaya/blog/796829