解决使用伪元素编写分割线，粗细不一致问题

通常我写分割线如下图

• html 代码

<div class="test">
  <a *ngFor="let item of lists" href="">测试1</a>
</div>

• css代码如下

.test {
  a {
    position: relative;
    padding: 4px 20px;

    & + a {
      &::after {
        position: absolute;
        top: 20%;
        left: 0;
        content: "";
        // 如下两种方式
        height: 60%;
        width: 1px;
        background-color: red;
        // width: 0px;
        // border-left: 1px solid red;
      }
    }
  }
}

• 效果如下 - 有些粗细不一致

解决方案如下

• css改成如下

.test {
  a {
    position: relative;
    padding: 4px 20px;

    & + a {
      &::after {
        position: absolute;
        top: 20%;
        left: 0;
        content: "";
        height: 60%;

        background-color: transparent;
        width: 1px;
        border-left: 1px solid red;
      }
    }
  }
}

• 效果如下