纯 html + css 可构建可访问、易维护的时间轴，关键在于语义结构（用 和 ）、伪元素精准定位（::before 画主线需 position: relative，::before 圆点需 transform: translatex(-50%)）及响应式布局（内容区用 margin-left 避开视觉干扰）。
纯 HTML + CSS 就能做出可访问、易维护的时间轴，关键不是“画线”，而是结构语义正确、伪元素定位不漂移、响应式不崩。
用 <ol></ol> 而不是 <div> 包时间点
<p>时间轴本质是有序事件流，<code><ol></ol> 天然带序号、语义明确、屏幕阅读器能识别顺序。用 <div> 或 <code><ul></ul> 后期加 ARIA、做无障碍或 SEO 会额外补一堆属性。
-
<ol></ol> 里每个时间点用 <li>，内部嵌 <time></time>（日期）、<h3></h3>（标题）、<p></p>（描述）——这是最简语义组合
- 别给
<li> 设 display: flex 或 position: absolute，否则 <time></time> 的机器可读性会打折扣
- 如果不需要序号数字，用
list-style: none 关掉，别为了“看起来像时间轴”而放弃语义
<ol>::before</ol> 画主线，必须配 position: relative
<ol></ol> 里每个时间点用 <li>，内部嵌 <time></time>（日期）、<h3></h3>（标题）、<p></p>（描述）——这是最简语义组合<li> 设 display: flex 或 position: absolute，否则 <time></time> 的机器可读性会打折扣list-style: none 关掉，别为了“看起来像时间轴”而放弃语义<ol>::before</ol> 画主线，必须配 position: relative
主线是一条贯穿始终的竖线，画在 <ol></ol> 上最省性能——只渲染一次，不随节点数增加而重复绘制。但漏掉 position: relative 是最常见翻车点。
-
<ol></ol>必须设position: relative，否则::before的top/bottom会相对于最近的定位祖先（可能是），导致竖线错位或消失 - 主线样式推荐：
content: ""+position: absolute+left: 1rem+top: 0+bottom: 0+width: 2px+background: #e0e0e0 - 别用
border-left代替伪元素——它会撑开父容器宽度，且无法独立控制起止位置（比如想让线从第二项开始）
<li>::before</li> 画圆点，transform: translateX(-50%) 不能省
圆点要视觉上“钉”在主线中点，不是左贴线、也不是右贴线，而是中心对齐。靠 transform: translateX(-50%) 把定位原点从左上角拉到中心。
- 典型写法：
left: 1rem（和主线left值一致）+top: 50%+transform: translateX(-50%)—— 没这句，圆点右边缘才对齐主线，看起来偏右一截 - 尺寸建议用固定
px（如width: 12px），避免小屏下因rem缩得太小看不清 - 边框色（
border: 2px solid #333）必须和主线颜色一致，否则视觉断开；背景色用#fff确保深色主线上的可读性
内容区用 margin-left 推开，别碰 padding-left
文字内容要避开竖线和圆点，用 margin-left 是唯一稳妥方式。一旦用 padding-left，遇到内联元素、浮动或 flex 子项，高度计算就容易出错。
- 统一设
<li> > *</li>（或直接<li>）的margin-left: 48px：预留圆点直径（12px）+ 边框（2px × 2）+ 间隙（约 30px） - 如果某条时间项要加图标或状态标签，单独加
margin-left: 64px，不要全局改这个值 - 别给
<li>设固定height，内容长短不一，设了反而会截断或留白异常
真正难的不是画线，是让 <time></time> 标签在 IE11 里正常显示、让伪元素在 Safari 旧版里不闪动、让 100 条记录滚动时不卡顿——这些细节没写进基础示例里，但上线前必须验。
