参考链接:
(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;
}