Линия прогресса между шагами в пошаговом приложении ⇐ CSS

[Anonymous]

Я создал фиктивное пошаговое приложение, с функциональностью оно работает нормально. Я пытаюсь добавить линию прогресса прямо под кругом и между всеми кругами, но, к сожалению, она не отображается. Кружочки, обозначающие шаги, имеют три состояния.

• Зеленый — когда шаг завершен.
• Серый — текущий. шаг
• Белый, когда он не тронут.

В аналогичном случае я хочу зеленую линию, когда текущий шаг завершен. и линия, направленная к следующему шагу, должна быть серой. Может кто-нибудь помочь?
песочница: https://codesandbox.io/p/sandbox/stepper-ppnqgc
import React from "react";
import "./styles.css";

interface StepsProps {
currentStep: number;
setStep: (step: number) => void;
submitted: boolean;
stepsData: { title: string; content: string }[];
}

const Steps: React.FC = ({
currentStep,
setStep,
submitted,
stepsData,
}) => (

• {stepsData.map((step, index) => {
  const isComplete =
  index < currentStep || (index === stepsData.length - 1 && submitted);
  const isActive = index === currentStep;
  
  return (
• key={index}
  className={`${isActive ? "active" : ""} ${
  isComplete ? "complete" : ""
  }`}
  >
  
  {index < stepsData.length - 1 && }
  setStep(index)}>
  {step.title}
  
  
  );
  })}

);

export default Steps;


body {
margin: 0;
font-family: "Arial", sans-serif;
}

.header {
text-align: center;
background-color: #4caf50;
color: white;
padding: 10px 0;
}

.footer {
text-align: center;
background-color: #f5f5f5;
padding: 10px 20px;
display: flex;
justify-content: center;
gap: 15px;
border-top: 1px solid #ccc;
}

.footer-button {
padding: 10px 20px;
font-size: 16px;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.footer-button:disabled {
background-color: #ccc;
cursor: not-allowed;
}

.footer-button.submit {
background-color: #28a745;
}

.footer-button:hover:not(:disabled) {
background-color: #0056b3;
}

.body {
display: flex;
height: calc(100vh - 140px);

.left {
width: 30%;
background-color: #f9f9f9;
padding: 20px;
border-right: 1px solid #ccc;
}

.right {
flex: 1;
padding: 20px;
background-color: #fff;
}

/* Steps Component */
.steps ul {
list-style-type: none;
padding: 0;
margin: 0;
}

.steps li {
display: flex;
align-items: center;
position: relative;
margin-bottom: 20px;
cursor: pointer;
}

.steps li:last-child {
margin-bottom: 0;
}

.circle {
width: 25px;
height: 25px;
border-radius: 50%;
border: 2px solid #ccc;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
transition: background-color 0.3s, border-color 0.3s;
}

.complete .circle {
background-color: #4caf50;
border-color: #4caf50;
}

.active .circle {
background-color: #cccccc;
border-color: #cccccc;
}

.progress-line {
position: absolute;
top: 25px;
left: 12px;
width: 2px;
height: calc(100% - 25px);
background-color: #ccc;
z-index: 0;
}

.steps li.complete .progress-line {
background-color: #4caf50;
}

.step-label {
margin-left: 15px;
font-size: 16px;
color: #333;
flex: 1;
transition: color 0.3s;
}

.steps li.active .step-label {
font-weight: bold;
color: #4caf50;
}

.steps li:hover .step-label {
color: #007bff;
}

.step-content {
padding: 20px;
font-size: 16px;
color: #333;
line-height: 1.5;
}


Подробнее здесь: https://stackoverflow.com/questions/793 ... tepper-app