纯HTML+CSS可实现清晰可维护的审批时间线：用语义化<ol>替代<div>，伪元素绘制连接线，状态通过class控制。
纯 HTML + CSS 就能实现清晰、可维护的审批流程时间线，不需要框架或 JS 也能响应式适配，关键在于语义化结构和层叠逻辑控制。
用 <ol> 而不是 <div> 做时间线容器
时间线本质是有序步骤，<ol> 提供原生序号、语义正确、屏幕阅读器友好，且 CSS 的 counter-reset/counter-increment 可精准接管编号样式。
常见错误：用一堆 <div class="step"> 手动写 1. 2. 3. —— 后期增删步骤时极易漏改数字或错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个步骤用
<li>包裹，内部结构保持一致（如标题 + 时间 + 描述） - 用
ol { counter-reset: step; }和li::before { counter-increment: step; content: counter(step); }控制编号 - 避免给
<li>设固定高度或绝对定位，否则响应式下易重叠
position: relative + ::after 画连接线更稳
很多教程用背景图或额外 <div> 画竖线，结果在缩放、深色模式、不同字体下断裂或偏移。用伪元素 + 相对定位才是可靠方案。
使用场景：垂直时间线（最常见）、带分支的审批节点（需额外 class 控制方向）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给
ol设position: relative，为伪元素提供定位上下文 - 用
ol::before绘制主竖线：content: ""; position: absolute; top: 2rem; bottom: 2rem; left: 1.5rem; width: 2px; background: #e0e0e0; - 每个
li的圆点用li::before实现，position: absolute精确对齐竖线，不依赖 margin 推挤 - 移动端断点里把
ol::before改成横向（left: 0; top: 1.5rem; width: 100%; height: 2px;），并调整li的flex-direction
审批状态用 class 切换，别硬编码颜色
“已通过”“待审核”“被驳回”这些状态会随后端数据变化，HTML 中只保留语义 class，如 status-pending、status-approved，CSS 控制表现。
容易踩的坑：直接写 style="color: #1890ff" 或在 HTML 里拼接内联样式 —— 后期换主题色或加暗色模式时要全局搜索替换。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个
li加一个data-status属性（如data-status="approved"），便于 JS 后续操作 - CSS 写明确的状态规则：
.status-pending .step-label { color: #faad14; }、.status-rejected .step-dot { background: #f5222d; } - 驳回节点常需显示原因，用
<details><summary>查看驳回说明</summary>...</details>，不占默认空间又可展开
真正难的不是画出时间线，而是让「步骤增减」「状态变更」「多端适配」这三件事互不干扰。只要结构用对了 <ol>，连线用对了伪元素，状态交给 class 控制，后续维护就只是改几行 CSS 或增删一个 <li>。
