如何用CSS在圆形div间添加居中响应式分隔线？

我来帮你搞定这个问题！要实现响应式圆形之间的居中边框线，核心是借助CSS flex布局+伪元素（或背景渐变）来生成线条，同时确保圆形始终保持正圆且自适应容器宽度。下面是两种实用的解决方案：

方法一：容器伪元素方案（推荐，结构更简洁） #

这个思路是给容器添加一条贯穿的线条，再让圆形的白色背景覆盖线条，最终只在圆形之间显示边框线，实现起来直观且响应式拉满。

1. HTML结构 #

先把所有圆形放在统一容器里：

<div class="steps-container">
  <div class="default-step"><span>1</span></div>
  <div class="default-step"><span>2</span></div>
  <div class="default-step"><span>3</span></div>
</div>

2. CSS样式 #

/* 容器：flex布局让圆形水平排列、垂直居中 */
.steps-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  padding: 0 20px; /* 可选：给容器左右加内边距，避免圆形贴边 */
}

/* 容器伪元素：生成贯穿的边框线，垂直居中 */
.steps-container::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 5px; /* 和圆形的border宽度保持一致，视觉更统一 */
  background-color: #3A83C5;
  transform: translateY(-50%);
  z-index: 0; /* 让线条在圆形下方，被白色背景覆盖 */
}

/* 圆形样式：确保响应式正圆，覆盖线条 */
.default-step {
  flex-shrink: 0; /* 防止圆形被容器压缩变形 */
  width: 25%; /* 根据圆形数量调整，保证间距合理 */
  max-width: 120px; /* 和你原设置的最大宽度一致 */
  padding-top: 25%; /* 用padding-top维持宽高比，实现自适应正圆 */
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  position: relative;
  z-index: 1; /* 让圆形在线条上方，覆盖线条 */
}

/* 圆形内文字完美居中 */
.default-step span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法二：圆形伪元素方案（单条线条可控性更高） #

如果需要对每条线条单独设置样式，可以给除第一个圆形外的元素添加伪元素作为线条：

CSS调整部分 #

/* 容器样式 */
.steps-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  padding: 0 20px;
}

/* 圆形基础样式（保留你原设置，优化响应式） */
.default-step {
  flex-shrink: 0;
  width: 25%;
  max-width: 120px;
  padding-top: 25%;
  border: 5px solid #3A83C5;
  border-radius: 50%;
  background: #FFF;
  color: #084085;
  font: 16px "josefin sans", arial;
  cursor: default;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 给除第一个圆形外的元素添加左侧线条 */
.default-step:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -100%;
  width: 100%;
  height: 5px;
  background-color: #3A83C5;
  transform: translateY(-50%);
  z-index: -1;
}

关键细节说明 #

• 响应式正圆：用padding-top: 百分比替代固定height，因为padding的百分比是基于元素宽度计算的，能确保圆形在任何宽度下都保持正圆。
• 线条居中：通过transform: translateY(-50%)让线条垂直居中，配合flex布局的align-items: center保证整体对齐。
• 层级控制：z-index确保线条在圆形下方，只会在两个圆形的间隙中显示，不会被白色背景遮挡。

这样调整后，无论是容器宽度变化还是圆形数量调整，线条都会自动适配，完美居中在两个圆形之间~

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