为什么 SCSS 中的边框不显示在网站上 [重复]

Question

我正在做一个有角度的项目，我正在努力制作我的菜单。

我的 SCSS：

// Small tablets and large smartphones (landscape view)
$screen-sm-min: 576px;

// Mixins
// Small devices
@mixin sm {
  @media (min-width: #{$screen-sm-min}) {
      @content;
  }
}

ul{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: end;
  align-items: center;
  list-style: none;
  @include sm{
    display: block;
    position: relative;
    &:before{
      position: absolute;
      content: '';
      background-color: red;
      border-radius: 50rem;
      width: 40px;
      height: 40px;
    }
  }

  li{
    margin-left: 5px;
    margin-right: 5px;
    @include sm{
      margin: 0;
      padding-top: 40px;
      padding-left: 40px;
      position: relative;
      transform: translateY(40px);
      &:before{
        position: absolute;
        content: '';
        background-color: red;
        height: 100%;
        width: 20px;
        left: 20px;
        top: -10px;
        display: block;
        border: 5px blue !important;
        border-radius: 0 0 0 50rem;
      }
      &:after{
        position: absolute;
        content: '';
        background-color: red;
        height: 100%;
        width: 2px;
        left: 20px;
        top: -5px;
        display: block;
      }
      a{
        height: 20px;
        display: flex;
        align-items: center;
      }
    }
  }
}

如您所见，当屏幕大于 576 像素时，我的列表项的 :before 伪元素上有一个蓝色边框。 还有我的 HTML：

<ul>
  <li><a [routerLink]="['/']">Home</a></li>
  <li><a [routerLink]="['/watchlist']">Watchlist</a></li>
  <li><a [routerLink]="['/movies']">All movies</a></li>
  <li><a [routerLink]="['/aboutMe']">About me</a></li>
</ul>

给出结果：

在检查元素上我确实在伪元素上有边框

我想要的结果

有谁知道我的错误是什么以及为什么我的伪元素上没有边框？

Answer 1

border需要边框样式属性：border: blue 5px solid;