可用、可访问、不卡顿的时间轴应使用语义化的结构，配合position: relative锚定伪元素，用::before画主轴线、::before画圆点并用transform校准，小屏降级为svg圆点。
纯 HTML + CSS 就能做出可用、可访问、不卡顿的时间轴，关键不是“怎么画线”，而是结构语义对、定位锚点稳、伪元素不漂移。
用 <ol></ol> 而不是 <div> 包时间点
<p>时间轴本质是**有序事件流**，<code><ol></ol> 天然带序号、语义正确、屏幕阅读器能识别顺序，比一堆 <div class="item"> 更可靠。IE11 里它也不需要 polyfill，而 <code><time></time> 标签才需要额外处理。
- 每个时间点必须包裹在
<li> 内，不要用 <div> 模拟列表项
<li>禁用默认序号：给 <code><ol></ol> 加 list-style: none，避免和自定义圆点冲突
- 必须设
position: relative 在 <ol></ol> 上——否则所有子项的绝对定位伪元素都会相对于视口或最近定位祖先错位
- 预留左侧空间：
padding-left: 2.5rem（不是 margin），为竖线和圆点留出安全区
<ol>::before</ol> 画主轴线，别用 border-left
主轴线是贯穿始终的视觉基准，用伪元素画最轻量，但容易因父容器没定位或尺寸计算错而断开、偏移。
- 必须配合
<ol></ol> 的 position: relative 才能用 top: 0; bottom: 0 拉满高度
- 用
height: 100% 不可靠（尤其 flex 容器中），优先写死 bottom: 0 + top: 0
- 别用
border-left: 2px solid #ccc ——它会撑宽容器、干扰后续 left 定位，改用 width: 2px; background: #ccc
- IE11 下
linear-gradient 画线会失效，坚持用纯色 background，简单即可靠
<li>::before</li> 画圆点，transform: translateX(-50%) 不能少
圆点必须精确钉在主轴线上，否则左右错位一眼可见。只靠 left 值很难对齐，必须用位移校准。
- 圆点默认
position: absolute; left: 1.25rem; top: 50%（假设主轴线在 1.25rem）
- 加上
transform: translateX(-50%)，让圆点中心真正落在 left 坐标上
- 漏掉这句，圆点右边缘贴线，视觉上整体偏右约 6px（半径值）
- 圆点尺寸建议固定：
width: 12px; height: 12px; border-radius: 50%，避免文字缩放时变形
响应式降级时，display: none 主轴线，改用内联 SVG 圆点
小屏下竖排时间轴拥挤、圆点错位、伪元素层级混乱，硬撑布局不如主动降级。
- 在
@media (max-width: 768px) 中，直接 <ol>::before { display: none }</ol>，砍掉整条竖线
- 每个
<li> 改用 background: url("data:image/svg+xml,...") no-repeat left center / 16px 画圆点，绕过 IE11 伪元素定位 bug
-
<time></time> 强制块级显示：display: block; font-size: .85em; color: #666，防止日期和标题挤在同一行
- 取消所有绝对定位圆点，改用
margin-bottom: 1.5rem 控制间距，更稳定
最容易被忽略的是：伪元素依赖父容器的 position: relative，但很多人只给 <li> 加，忘了最外层 <ol></ol>。一旦漏掉，整条轴线就飘了——这不是 CSS 写得不够炫，是锚点根本没钉住。
<li> 内，不要用 <div> 模拟列表项
<li>禁用默认序号：给 <code><ol></ol> 加 list-style: none，避免和自定义圆点冲突position: relative 在 <ol></ol> 上——否则所有子项的绝对定位伪元素都会相对于视口或最近定位祖先错位padding-left: 2.5rem（不是 margin），为竖线和圆点留出安全区
<ol>::before</ol> 画主轴线，别用 border-left
主轴线是贯穿始终的视觉基准，用伪元素画最轻量，但容易因父容器没定位或尺寸计算错而断开、偏移。
- 必须配合
<ol></ol>的position: relative才能用top: 0; bottom: 0拉满高度 - 用
height: 100%不可靠（尤其 flex 容器中），优先写死bottom: 0+top: 0 - 别用
border-left: 2px solid #ccc——它会撑宽容器、干扰后续left定位，改用width: 2px; background: #ccc - IE11 下
linear-gradient画线会失效，坚持用纯色background，简单即可靠
<li>::before</li> 画圆点，transform: translateX(-50%) 不能少
圆点必须精确钉在主轴线上，否则左右错位一眼可见。只靠 left 值很难对齐，必须用位移校准。
- 圆点默认
position: absolute; left: 1.25rem; top: 50%（假设主轴线在1.25rem） - 加上
transform: translateX(-50%)，让圆点中心真正落在left坐标上 - 漏掉这句，圆点右边缘贴线，视觉上整体偏右约 6px（半径值）
- 圆点尺寸建议固定：
width: 12px; height: 12px; border-radius: 50%，避免文字缩放时变形
响应式降级时，display: none 主轴线，改用内联 SVG 圆点
小屏下竖排时间轴拥挤、圆点错位、伪元素层级混乱，硬撑布局不如主动降级。
- 在
@media (max-width: 768px)中，直接<ol>::before { display: none }</ol>，砍掉整条竖线 - 每个
<li>改用background: url("data:image/svg+xml,...") no-repeat left center / 16px画圆点，绕过 IE11 伪元素定位 bug -
<time></time>强制块级显示：display: block; font-size: .85em; color: #666，防止日期和标题挤在同一行 - 取消所有绝对定位圆点，改用
margin-bottom: 1.5rem控制间距，更稳定
最容易被忽略的是：伪元素依赖父容器的 position: relative，但很多人只给 <li> 加，忘了最外层 <ol></ol>。一旦漏掉，整条轴线就飘了——这不是 CSS 写得不够炫，是锚点根本没钉住。
