小程序 :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;
}

微信小程序效果圖：