标题两边横线样式

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

1，fieldset实现

<fieldset>
    <legend>添加爱车，实时关注车辆信息</legend>
</fieldset>

fieldset{border:none;border-top:1px solid #dedada; text-align:center;}
legend{padding:0 2rem;color:#888;font-size:12px;}

2，:before,:after实现

<div class="add-title">
    <span>添加爱车，实时关注车辆信息</span>
</div>

.add-title{
            display: block;
            text-align: center;
            width: 92%; margin: 0 auto 20px;
            position: relative;
            z-index: 1;
        }
.add-title:before,.add-title:after{
            content: '';
            background-color: #dedada;
            height: 1px;
            width: 20%;
            top:66%;
            display: block;
            position: absolute;
        }
.add-title:before{left:0;}
.add-title:after{right:0}
.add-title span{
            background-color: #fff;
            padding: 0 2rem;
            color: #888;
            font-size: 12px;
            z-index: 2;
        }

转载于:https://my.oschina.net/u/2393989/blog/2396126