小程序 :after实现1px纵向分割线

时间：2020-03-18 18:44:06 收藏：0 阅读：194

在开发中往往会使用到分割线，下面我们来研究下

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

微信小程序效果图：

技术分享图片

原文：https://www.cnblogs.com/jikeyun/p/12519282.html