如何用CSS创建带不同颜色圆点的垂直线布局

想要创建如图所示的包含垂直线、圆点且带有不同颜色的板块：

尝试了列表、span、多个div等多种实现方式，但始终无法正确对齐元素并设置不同颜色，当前代码如下：

HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
  <div class="left-section">
    <ul>
      <li>
        <span class="first"></span></span>
        <div class="a">
          <i class="fa-regular fa-credit-card"></i>
          <p class="bold">Add the virtual card to your mobile wallet</p>
          <p>Head over to Credit Karma Money™ for the How-to</p>
        </div>
      </li>
      <li class="active">
        <span class="second"></span>
        <div class="b">
          <i class="fa-solid fa-sack-dollar"></i>
          <p class="bold">Access your Refund Advance</p>
          <p>Yours to spend before your refund arrives</p>
        </div>
      </li>

      <li>
        <span class="thirdLine"></span>
        <span class="third"></span></span>
        <div class="c">
          <i class="fa-regular fa-star"></i>
          <p class="bold">Use your card to earn more rewards</p>
          <p>Earn cash back on select debit card purchases</p>
        </div>
      </li>
      </span>
    </ul>
  </div>
  <div class="right-section">Right Section
  </div>
</div>

CSS代码 #

* {
  box-sizing  : border-box;
  font-family : Nunito, sans-serif;
  }
.bold {
  font-weight : 700
  }
.container {
  margin : 40px 40px;
  }
@media (min-width: 768px) 
  {
  .container {
    display : flex;
    }
  }
i {
  color    : rgb(9, 121, 105);
  position : relative;
  display  : inline;
  }
.container ul {
  list-style : none;
  margin     : 0;
  padding    : 0;
  position   : relative;
  }
.container ul::before {
  content  : '';
  position : absolute;
  top      : 0;
  left     : 0;
  width    : 0px;
  height   : 100%;
  border   : 2px solid rgb(9, 121, 105);
  }
.container ul li {
  margin   : 30px 25px;
  position : relative;
  }
.container ul li span {
  content  : '';
  position : absolute;
  top      : 0;
  left     : -25px;
  width    : 0px;
  height   : 100%;
  border   : 2px solid rgb(9, 121, 105);
  }
.first::before {
  content          : '';
  width            : 10px;
  height           : 10px;
  border           : 2px solid rgb(9, 121, 105);
  position         : absolute;
  border-radius    : 50px;
  left             : -7px;
  background-color : rgb(9, 121, 105);
  }
.second::before {
  content          : '';
  width            : 10px;
  height           : 10px;
  border           : 2px solid rgb(9, 121, 105);
  position         : absolute;
  border-radius    : 50px;
  left             : -7px;
  background-color : white;
  }
.third::before {
  content          : '';
  width            : 10px;
  height           : 10px;
  border           : 2px solid rgb(9, 121, 105);
  position         : absolute;
  border-radius    : 50px;
  left             : -7px;
  background-color : gray;
  }
.thirdLine::before {
  content  : '';
  position : absolute;
  top      : 0;
  left     : -25px;
  width    : 0px;
  height   : 100%;
  border   : 2px solid grey;
  }
.container ul li span::before {
  top  : -5px;
  left : -7px;
  }

以下是修正后的代码，解决了对齐和颜色控制问题：

修正后的HTML代码 #

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="container">
  <div class="left-section">
    <ul>
      <li class="step completed">
        <div class="step-content">
          <i class="fa-regular fa-credit-card"></i>
          <p class="bold">将虚拟卡添加到手机钱包</p>
          <p>前往Credit Karma Money™查看操作指南</p>
        </div>
      </li>
      <li class="step active">
        <div class="step-content">
          <i class="fa-solid fa-sack-dollar"></i>
          <p class="bold">获取退款预支额度</p>
          <p>退款到账前即可使用</p>
        </div>
      </li>
      <li class="step pending">
        <div class="step-content">
          <i class="fa-regular fa-star"></i>
          <p class="bold">使用卡片赚取更多奖励</p>
          <p>指定借记卡消费可返现</p>
        </div>
      </li>
    </ul>
  </div>
  <div class="right-section">右侧区域</div>
</div>

修正后的CSS代码 #

* {
  box-sizing: border-box;
  font-family: Nunito, sans-serif;
  margin: 0;
  padding: 0;
}

.bold {
  font-weight: 700;
}

.container {
  margin: 40px;
}

@media (min-width: 768px) {
  .container {
    display: flex;
  }
}

.left-section {
  flex: 1;
}

.right-section {
  flex: 1;
  margin-left: 20px;
}

.step {
  list-style: none;
  position: relative;
  padding-left: 30px;
  margin-bottom: 40px;
}

/* 垂直线条 */
.step::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 0;
  height: 100%;
  width: 2px;
  background-color: #097969;
}

/* 最后一个步骤不需要底部线条 */
.step:last-child::before {
  height: 12px;
}

/* 圆点样式 */
.step::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #097969;
  background-color: white;
}

/* 已完成状态 */
.step.completed::after {
  background-color: #097969;
}

/* 进行中状态 */
.step.active::after {
  background-color: white;
  border-color: #097969;
}

/* 待完成状态 */
.step.pending::before {
  background-color: gray;
}
.step.pending::after {
  background-color: gray;
  border-color: gray;
}

.step-content i {
  color: #097969;
  margin-bottom: 8px;
}

.step-content p {
  margin: 4px 0;
}

关键修改说明 #

1. 简化结构：移除多余的span元素，直接通过列表项的伪元素实现线条和圆点，避免结构冗余
2. 统一定位：所有线条和圆点都基于列表项(.step)定位，确保对齐准确
3. 状态区分：通过completed/active/pending类名控制不同状态下的颜色，逻辑清晰
4. 布局优化：调整内边距和外边距，保证内容与线条、圆点的间距合理
5. 响应式兼容：保留原有的flex布局，适配桌面端展示

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