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

参考链接：
（1）小程序实现左右横线中间文字
https://blog.csdn.net/qq_43693520/article/details/86701761

关键
使用伪元素::before，::after

效果图

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