在vue页面利用css伪元素：：after画样式

上面是UI给的原型图，其实做的是一个vue的嵌套表格上下级的关系，大家都看过element里面的树形组件，就是拿那个实现的，改的样式。

刚开始画出来是这样的，那个线突出去了，原型上是不突出的，最后研究发现表格的每一格的线都是拼接的，所以就把第一列的线隐藏了，利用伪元素加了一条线，调整一下距离就可以了，接下来看代码。

.el-table__body .el-table__row td:nth-child(1) { //调整距离
  margin-left: 20px;
}
.el-table__body .el-table__row td:nth-child(1) {//隐藏第一列的线
  border-bottom: none !important;
  position: relative !important;
  &::after {//加入伪元素开始画图
    content: "";
    width: 78% !important;
    height: 1px;
    background: #ebeef5;
    display: block;
    position: absolute;
    left: 22%;
    bottom: 0px;
    z-index: 2;
  }
}

总是少依赖框架，伪元素真香，element还是非常niu的，这样的需求小细节都能想到，哈哈