时间轴节点是CSS视觉扩展而非HTML语义功能，通过ol的::before伪元素绘制圆点、::after绘制垂直线实现，时间信息应置于li内容或data-属性中，禁用value属性。
时间轴节点本质是 ol 的视觉扩展，不是语义功能
HTML 原生 <ol></ol> 只负责有序编号逻辑，不提供“时间轴”样式。所谓“时间轴节点”，实际是通过 CSS 控制 <li> 的伪元素（如 ::before）、背景线、定位偏移等实现的视觉效果，而非新增 HTML 结构或属性。
直接在 <ol></ol> 里塞额外标签（比如 <div class="timeline-dot">）会破坏语义和可访问性，也容易干扰屏幕阅读器对序号的识别。
<h3>用 CSS ::before 绘制节点并连接时间线</h3>
<p>主流做法是让每个 <code><li> 生成一个圆点（节点），再用绝对定位的伪元素画出垂直线（时间线）。关键在于避免硬编码高度、固定 top 值——应依赖自然流布局 + 相对定位。
- 给
<ol></ol>设position: relative和左侧留白（为时间线预留空间） - 每个
<li>设position: relative，并用::before画圆点（content: ""+border-radius: 50%） - 用
<ol>::after</ol>画贯穿的垂直线，height: 100%或用linear-gradient避免高度计算误差 - 若需响应式，优先用
em或rem控制间距，而非像素值
ol.timeline {
position: relative;
padding-left: 2rem;
}
ol.timeline::after {
content: "";
position: absolute;
left: 0.5rem;
top: 0;
bottom: 0;
width: 2px;
background: #ccc;
}
ol.timeline li {
position: relative;
padding-left: 2rem;
margin-bottom: 1.5rem;
}
ol.timeline li::before {
content: "";
position: absolute;
left: 0.3rem;
top: 0.5rem;
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background: #333;
}
时间信息放哪？别塞进 value 属性
有人试图用 <li value="2023"> 显示年份，这是错的：value 属性只控制该 <li> 的**序号数值**（影响后续项编号），不是展示内容。时间信息必须作为文本内容或 data- 属性存在。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 正确方式：把时间写在
<li>内部，比如<li> <strong>2023年</strong>：项目启动</li> - 需要 JS 读取时，用
data-year="2023"，而非滥用value - 若想隐藏时间仅用于辅助技术，加
aria-label，例如<li aria-label="2023年：项目启动">...</li>
IE 兼容或动画需求时，伪元素要小心
IE11 对 ::before/::after 在某些 display 类型（如 table-cell）下支持不佳；若需节点缩放/颜色过渡，得确保触发重绘的属性（如 transform、background-color）被正确声明。
- 避免在
::before上设display: inline-block后又用vertical-align微调——IE 可能失效 - 动画节点时，优先用
transform: scale()而非width/height，性能更稳 - 若时间线需横屏（水平时间轴），把
flex-direction: row和white-space: nowrap加在<ol></ol>上，同时翻转伪元素方向
时间轴的复杂度不在 HTML 结构，而在 CSS 定位与语义边界的平衡——节点位置偏移 2px 不显眼，但 aria-level 错配或 value 误用会让整个列表对残障用户失效。
