用CSS3伪类为文字两边添加横线

wxml：

<!-- 我是有底线的 -->
<view class="footer">上面已经是您所在的社区所有的商家了哦</view>

wxss：

/* 我是有底线的 */
.footer {
    width: 100%;
    padding: 40rpx 0;
    text-align: center;
    color: #CCCCCC;
    font-size: 20rpx;
}

.footer:before,
.footer:after {
    content: '';
    width: 70rpx;
    height: 2rpx;
    background: #CCCCCC;
    /*1.首先使伪类显示方式为块级元素*/
    display: block;
    /*2.通过相对定位的方式控制两侧内容的位置*/
    position: relative;
}

/*3.控制左侧横线的位置*/
.footer:before {
    top: 15rpx;
    left: 110rpx;
}

/*4.控制右侧横线的位置*/
.footer:after {
    top: -15rpx;
    right: -570rpx;
}

效果图：