此问题在此处已有答案：

HTML Div border not showing（3个答案）
10小时前就关门了。
我正在做一个Angular项目，我正在努力做我的菜单。
我的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;
      }
    }
  }
}

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

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

给予结果：

在inspect元素上，我在伪元素

上有边界
我要的结果

有人知道我的错误是什么吗？为什么我的伪元素上没有边界？