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

初心-杨瑞超个人博客诚邀您加入qq群(IT-程序猿-技术交流群)：757345416

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

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

效果图：