小程序实现左右横线中间文字

##小程序实现左右横线中间文字
废话不说，直接上效果图

wxml代码如下

<view class='recommend'>
  <text class='recommend-title'>热门推荐</text>
</view>

wxss代码如下

.recommend {
  text-align: center;
  height: 50rpx;
  margin-top: 10rpx;
}

.recommend-title {
  display: table;
  width: 100%;
  line-height: 50rpx;
  white-space: nowrap;
  border-spacing: 2rem 0;
  font-size: 30rpx;
  color: gray
}

.recommend-title::before, .recommend-title::after {
  display: table-cell;
  content: "";
  width: 50%;
  background: linear-gradient(#eee, #eee) repeat-x center;
  background-size: 0.1rem 0.1rem;
}

关键思想：使用伪元素::before,::after。