小程序 :after实现1px纵向分割线
在开发中往往会使用到分割线,下面我们来研究下
view部分:
<view class="line"> <view class="line-left">+86</view> <view class="line-right">123</view> </view>
css部分:
.line{ display: flex; height: 56rpx; background: rgba(0, 0, 0, 0.6); line-height: 56rpx; color: #fff; } .line view{ padding:0 16rpx } .line-left::after{ content: ""; width:1rpx; height: 30rpx; background: #fff; position: absolute; top: 13rpx; left: 80rpx; }
微信小程序效果图: