css伪类样式覆盖

项目中用的scss在写一个样式的时候遇到一个问题。

就是用伪类设置完这个样式之后发现总有一边的没办法到预期位置，后来通过强行覆盖一边的样式达成预期效果。

附上代码：

  .panel::after{
    content: "";
    display: inline-block;
    width: 2px;
    height: 20vh;
    background-image: linear-gradient(0deg, rgba(0, 120, 205, 0) 1%, #6395fa 54%, rgba(0, 120, 204, 0));
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
  }
  .right {
    .panel {
      &::after {
        left: 0;
      }
    }
  }

如果有其他比较好的办法希望指点一下