如何使用 CSS 伪元素在圆形步骤图之间添加响应式箭头连接线-html教程-PHP中文网

如何使用 CSS 伪元素在圆形步骤图之间添加响应式箭头连接线

本文介绍一种基于 css grid 和伪元素（::before/::after）的现代方案，无需额外 html 元素即可在水平排列的圆形步骤节点间自动生成带箭头的连接线，兼顾语义性、响应性和可维护性。

本文介绍一种基于 css grid 和伪元素（::before/::after）的现代方案，无需额外 html 元素即可在水平排列的圆形步骤节点间自动生成带箭头的连接线，兼顾语义性、响应性和可维护性。

要实现如示意图所示的「圆圈 + 右向箭头连线」流程图效果，关键在于结构语义化与样式自动化：避免手动插入

和等冗余标签，转而利用 CSS 伪元素动态生成连接线与箭头，使 DOM 更简洁、布局更健壮、响应更自然。
✅ 推荐实现方案（语义清晰 + 响应友好）

采用 display: grid 布局统一管理步骤项，并通过 ::before 绘制横线、::after 渲染箭头，所有样式均绑定在 .circletext 容器上：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

<div class="circle">
  <div class="circletext">
    <div class="circle-1">1</div>
    <span>Planning</span>
  </div>
  <div class="circletext">
    <div class="circle-1">2</div>
    <span>Recruit</span>
  </div>
  <div class="circletext">
    <div class="circle-1">3</div>
    <span>Training and<br>Collaboration</span>
  </div>
  <div class="circletext">
    <div class="circle-1">4</div>
    <span>Support</span>
  </div>
</div>

对应核心 CSS（已优化兼容性与可读性）：

.circle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem; /* 替代固定 margin，提升响应性 */
  justify-items: center;
  align-items: start;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

.circletext {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
  color: #595555;
}

/* 圆形数字容器 */
.circle-1 {
  width: 70px;
  height: 70px;
  border: 2px solid #0070BA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0070BA;
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.75rem;
}

/* 连接线（仅非末尾项显示） */
.circletext:not(:last-child)::before {
  content: '';
  position: absolute;
  top: 50px; /* 线条垂直位置，对齐圆心 */
  left: calc(50% + 35px); /* 从当前圆右边缘起始 */
  width: calc(100% - 70px); /* 跨越至下一个圆左边缘 */
  height: 2px;
  background-color: #0070BA;
  z-index: 1;
}

/* 箭头（仅非末尾项显示） */
.circletext:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 42px; /* 微调使箭头尖端对齐线条终点 */
  left: calc(100% + 15px); /* 精准定位在当前项右侧边界外 */
  width: 0;
  height: 0;
  border: solid transparent;
  border-right-color: #0070BA;
  border-width: 6px 0 6px 10px; /* 箭头尺寸：宽10px，高12px */
  transform: translateY(-50%);
  z-index: 2;
}

⚠️ 注意事项与增强建议

响应式适配：grid-template-columns: repeat(4, 1fr) 在小屏下会挤压，建议配合媒体查询改为 repeat(auto-fit, minmax(180px, 1fr)) 实现自动折行；
文字换行：标签替代纯文本，便于控制 line-height 和 white-space，避免
破坏语义；
颜色与主题：将 #0070BA 抽取为 CSS 自定义属性（如 --primary-color），便于全局主题切换；
无障碍增强：为 .circle-1 添加 aria-hidden="true"，并在中补充完整步骤描述，确保屏幕阅读器正确播报；
动画延伸：如需箭头渐显效果，可为 ::before 和 ::after 添加 transition: opacity 0.3s ease，配合 JS 触发 opacity: 1。