纯html+css可实现清晰可维护的审批时间线：用语义化替代，伪元素绘制连接线，状态通过class控制。
纯 HTML + CSS 就能实现清晰、可维护的审批流程时间线，不需要框架或 JS 也能响应式适配，关键在于语义化结构和层叠逻辑控制。
用 <ol></ol> 而不是 <div> 做时间线容器
<p>时间线本质是有序步骤，<code><ol></ol> 提供原生序号、语义正确、屏幕阅读器友好，且 CSS 的 counter-reset/counter-increment 可精准接管编号样式。
常见错误：用一堆 <div class="step"> 手动写 1. 2. 3. —— 后期增删步骤时极易漏改数字或错位。
<p>实操建议：</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill9263" title="Html2md"><img
src="https://img.php.cn/upload/skill/000/000/081/179249945220127.jpg" alt="Html2md" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="overflowclass">Html2md</a>
<p class="overflowclass">使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...</p>
</div>
<a rel="nofollow" href="/xiazai/skill9263" title="Html2md" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<ul>
<li>每个步骤用 <code><li> 包裹，内部结构保持一致（如标题 + 时间 + 描述）
ol { counter-reset: step; } 和 li::before { counter-increment: step; content: counter(step); } 控制编号<li> 设固定高度或绝对定位，否则响应式下易重叠
position: relative + ::after 画连接线更稳
很多教程用背景图或额外 <div> 画竖线，结果在缩放、深色模式、不同字体下断裂或偏移。用伪元素 + 相对定位才是可靠方案。
<p>使用场景：垂直时间线（最常见）、带分支的审批节点（需额外 class 控制方向）。</p>
<p>实操建议：</p>
<ul>
<li>给 <code>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></ol>，连线用对了伪元素，状态交给 class 控制，后续维护就只是改几行 CSS 或增删一个 <li>。
