初心-楊瑞超個人部落格誠邀您加入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;
}
 

效果圖：