参考链接:
(1)小程序实现左右横线中间文字
https://blog.youkuaiyun.com/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;
}
本文介绍了一种在小程序中实现横线中间置入文字效果的方法。通过使用伪元素::before和::after,并结合WXSS样式调整,可以轻松地创建出美观的热门推荐等标题样式。文中提供了具体的WXSS代码及布局示例。
1694





