本文介绍一种基于 css grid 和伪元素（::before/::after）的现代方案，无需额外 html 元素即可在水平排列的圆形步骤节点间自动生成带箭头的连接线，兼顾语义性、响应性和可维护性。
本文介绍一种基于 css grid 和伪元素（::before/::after）的现代方案，无需额外 html 元素即可在水平排列的圆形步骤节点间自动生成带箭头的连接线，兼顾语义性、响应性和可维护性。
要实现如示意图所示的「圆圈 + 右向箭头连线」流程图效果，关键在于结构语义化与样式自动化：避免手动插入 <div class="arrow-line"> 和 <i class="arrow"> 等冗余标签，转而利用 CSS 伪元素动态生成连接线与箭头，使 DOM 更简洁、布局更健壮、响应更自然。
✅ 推荐实现方案（语义清晰 + 响应友好）
采用 display: grid 布局统一管理步骤项，并通过 ::before 绘制横线、::after 渲染箭头，所有样式均绑定在 .circletext 容器上：
<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)) 实现自动折行；
- 文字换行：<span> 标签替代纯文本，便于控制 line-height 和 white-space，避免 <br> 破坏语义；
- 颜色与主题：将 #0070BA 抽取为 CSS 自定义属性（如 --primary-color），便于全局主题切换；
- 无障碍增强：为 .circle-1 添加 aria-hidden="true"，并在 <span> 中补充完整步骤描述，确保屏幕阅读器正确播报；
- 动画延伸：如需箭头渐显效果，可为 ::before 和 ::after 添加 transition: opacity 0.3s ease，配合 JS 触发 opacity: 1。
该方案彻底摆脱了硬编码连接元素，真正实现「写一次、处处可用」——新增步骤只需追加一个 .circletext，连线与箭头自动就位，结构干净、逻辑清晰、维护成本极低。
立即学习“前端免费学习笔记（深入）”；
