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

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

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

view部分:


  +86
  123

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

效果图:
小程序 :after实现1px纵向分割线_第1张图片

你可能感兴趣的:(小程序)