如何使用CSS创建带有多个圆点的竖直线？

下面给你两种简单实用的实现方式，对应你想要的效果：

方法一：背景渐变组合（最简洁） #

通过background-image把竖直线和圆点组合起来，利用重复背景实现均匀分布的圆点：

.dot-line {
  width: 2px; /* 竖线宽度 */
  height: 300px; /* 竖线总高度 */
  background-image: 
    radial-gradient(circle, #333 4px, transparent 4px), /* 圆点 */
    linear-gradient(#333, #333); /* 竖直线 */
  background-size: 100% 20px; /* 控制圆点间距：第二个值是间距 */
  background-repeat: repeat-y;
}

使用时直接加个容器：

<div class="dot-line"></div>

参数说明：

• radial-gradient里的4px是圆点半径，调整它改变圆点大小
• background-size的第二个值是圆点的间距，数值越大间距越宽
• #333是颜色，可以换成你需要的色值

方法二：列表+伪元素（更灵活） #

如果需要单独控制每个圆点的样式（比如hover效果），可以用列表配合伪元素实现：

.dot-list {
  list-style: none;
  padding-left: 12px; /* 给圆点和竖线留出空间 */
  position: relative;
}
/* 竖直线 */
.dot-list::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: #333;
}
/* 圆点 */
.dot-list li {
  position: relative;
  margin: 16px 0; /* 圆点间距 */
}
.dot-list li::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #333;
  border: 2px solid #fff; /* 可选：给圆点加白色边框，突出效果 */
}

使用示例：

<ul class="dot-list">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

这种方法可以轻松给单个圆点加交互效果，比如：

.dot-list li:hover::before {
  background-color: #ff4444;
}

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