標題兩邊橫線樣式

1,fieldset實現spa

<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實現code

<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;
        }
相關文章
相關標籤/搜索