如何实现仅在圆圈间显示的CSS border-bottom 解决首尾溢出及伪类颜色问题

现有代码问题排查 #

问题1：线条超出首尾圆圈 #

你给所有li同时添加了::before和::after两个伪类线条，第一个节点的::before、最后一个节点的::after没有做隐藏处理，自然会在首尾生成多余的外伸线条。

问题2：边框颜色不生效 #

大概率是选择器优先级不足被全局样式覆盖，其次要确认li父容器和li本身已经设置display: flex，否则伪类的flex: 1属性不生效，样式表现异常。

完整实现方案（适配React+TS+SCSS） #

第一步：React组件结构示例 #

const ProgressSteps = () => {
  // 步骤状态：complete已完成、current当前进行中、next未完成
  const steps = [
    { label: "第一步", status: "complete" },
    { label: "第二步", status: "complete" },
    { label: "第三步", status: "current" },
    { label: "第四步", status: "next" },
  ]

  return (
    <ul className="progress-steps">
      {steps.map((step, idx) => (
        <li 
          key={idx} 
          className={`step-item step-${step.status} ${idx === 0 ? 'first' : ''} ${idx === steps.length -1 ? 'last' : ''}`}
        >
          <span className="step-circle"></span>
          <span className="step-label">{step.label}</span>
        </li>
      ))}
    </ul>
  )
}

第二步：SCSS样式代码 #

.progress-steps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0;
  width: 100%;
  max-width: 600px; // 可根据需求调整总宽度

  .step-item {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1; // 所有步骤平分宽度

    // 公共伪类线条样式
    &::before, &::after {
      content: "";
      height: 2px;
      flex: 1;
    }

    // 隐藏首节点前线条、尾节点后线条
    &.first::before, &.last::after {
      display: none;
    }

    // 圆圈样式
    .step-circle {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      margin: 0 8px;
      flex-shrink: 0;
    }

    // 已完成状态
    &.step-complete {
      &::before, &::after {
        background-color: #26890D; // 直接用background比border更不容易被覆盖
      }
      .step-circle {
        background-color: #26890D;
      }
    }

    // 当前进行中状态
    &.step-current {
      &::before {
        background-color: #26890D;
      }
      &::after {
        background-color: #63666A;
      }
      .step-circle {
        background-color: #26890D;
        // 可以加个高亮效果，比如边框发光
        box-shadow: 0 0 0 2px rgba(38, 137, 13, 0.3);
      }
    }

    // 未完成状态
    &.step-next {
      &::before, &::after {
        background-color: #63666A;
      }
      .step-circle {
        background-color: #63666A;
      }
    }

    .step-label {
      font-size: 14px;
      margin-top: 40px; // 调整文字和圆圈的上下间距
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
  }
}

额外优化提示 #

如果还是出现颜色不生效的问题，可以先给样式加!important临时测试是否是优先级问题，如果加了之后生效，就调整选择器权重即可，比如给外层容器加个唯一类名，提升选择器优先级。用background代替border实现线条，也可以避免部分全局border样式的覆盖问题。

内容的提问来源于stack exchange，提问作者DSR