以下是修正后的 Sass（含语义化写法与关键注释）：

.container {
  #subnav {
    margin-top: 2rem;
    display: flex;
    justify-content: space-evenly;

    li {
      padding-bottom: 0.5rem;
      // 注意：原写法 border-bottom: 4px 0.5rem 是无效语法
      // 正确应为 border-bottom: 4px solid #f36e52;
      border-bottom: 4px solid transparent; // 初始无色，后续按需设置

      // 为每个 li 设置独立样式
      &:nth-child(1) {
        span {
          color: #f36e52; // 首项文字色
          &:after {
            content: '';
            display: block;
            width: 30%;
            height: 4px;
            background-color: #f36e52;
            margin-top: 0.3rem;
          }
        }
      }

      &:nth-child(2) {
        span {
          color: #4a90e2; // 第二项文字色
          &:after {
            content: '';
            display: block;
            width: 100%;
            height: 4px;
            background-color: #fff555;
            margin-top: 0.3rem;
          }
        }
      }

      &:nth-child(3) {
        span {
          color: #7ed321;
          &:after {
            content: '';
            display: block;
            width: 60%;
            height: 4px;
            background-color: #9013fe;
            margin-top: 0.3rem;
          }
        }
      }

      // 可继续扩展第4、5项... 或使用循环生成（Sass @for）
    }

    a {
      color: inherit; // 继承 span 的颜色，避免覆盖
      text-decoration: none;
      display: block; // 确保 :after 正常渲染（需块级上下文）
    }
  }
}

? 关键注意事项：

• :after 伪元素不能直接设置颜色（color 属性对其无效），它只能通过 background-color、border-color 或 content 中的 Unicode 字符来呈现视觉效果；
• 修改链接文字颜色，请直接作用于 span 或 a 元素，而非伪元素；
• border-bottom: 4px 0.5rem 是语法错误，CSS 边框需按 width style color 顺序书写（如 4px solid #f36e52）；
• 若需动态管理多个 nth-child 规则，推荐使用 Sass 循环（@for $i from 1 through 5）提升可维护性。

通过将选择器锚定在