时间轴节点是CSS视觉扩展而非HTML语义功能，通过ol的::before伪元素绘制圆点、::after绘制垂直线实现，时间信息应置于li内容或data-属性中，禁用value属性。

时间轴节点本质是 ol 的视觉扩展，不是语义功能

HTML 原生

只负责有序编号逻辑，不提供“时间轴”样式。所谓“时间轴节点”，实际是通过 CSS 控制

的伪元素（如 ::before）、背景线、定位偏移等实现的视觉效果，而非新增 HTML 结构或属性。

直接在

里塞额外标签（比如

）会破坏语义和可访问性，也容易干扰屏幕阅读器对序号的识别。

用 CSS ::before 绘制节点并连接时间线

主流做法是让每个

生成一个圆点（节点），再用绝对定位的伪元素画出垂直线（时间线）。关键在于避免硬编码高度、固定 top 值——应依赖自然流布局 + 相对定位。

• 给
  设 position: relative 和左侧留白（为时间线预留空间）
• 每个
• 设 position: relative，并用 ::before 画圆点（content: "" + border-radius: 50%）
• 用
  ::after
  画贯穿的垂直线，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 属性

有人试图用

显示年份，这是错的：value 属性只控制该

的**序号数值**（影响后续项编号），不是展示内容。时间信息必须作为文本内容或 data- 属性存在。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 正确方式：把时间写在
• 内部，比如
• 2023年：项目启动
• 需要 JS 读取时，用 data-year="2023"，而非滥用 value
• 若想隐藏时间仅用于辅助技术，加 aria-label，例如
• ...

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 加在
  上，同时翻转伪元素方向

时间轴的复杂度不在 HTML 结构，而在 CSS 定位与语义边界的平衡——节点位置偏移 2px 不显眼，但 aria-level 错配或 value 误用会让整个列表对残障用户失效。