简历时间轴应使用而非包裹时间节点，因其语义正确、利于无障碍访问和SEO；每个时间节点须为直接子元素，内部用++结构，伪元素绘制竖线与圆点，CSS变量统一管理样式。
用 <ol></ol> 而不是 <div> 包裹时间点<p>语义错误是简历时间轴最常被忽略的起点。很多开发者直接写 <code><div class="timeline"><div class="item">...，这会让屏幕阅读器无法识别事件顺序，也削弱 SEO。正确做法是用 <code><ol></ol> 作为容器——它天然表达“有序”含义，且浏览器默认赋予列表项隐含的序号逻辑。
每个时间节点必须是 <li> 的直接子元素，中间不能插 <div>、注释或空文本节点，否则 <code>:nth-child(odd) 选择器会失效。内部结构优先用 <time datetime="2022-03">2022年3月</time> + <h3></h3> + <p></p>，避免嵌套多层 <div>。<h3>
<code>::before 和 ::after 画线与圆点，别用额外 DOM
时间轴的竖线和节点圆点，99% 的情况不需要额外 HTML 标签。主轴线用 .timeline::before 在 <ol></ol> 上绘制，节点圆点用 li::before 实现。这样既减少 DOM 节点数，又方便统一控制颜色、大小和动画。
常见踩坑：
立即学习“前端免费学习笔记（深入）”；
- 把竖线写成一个独立的
<div class="line"> —— 增加维护成本，响应式时难对齐<li>给每个 <code>li加position: absolute却忘了父容器设position: relative，导致定位漂移 - 用
border-radius: 50%画圆点时没设width/height，结果在不同字体下缩放变形
左右交替靠 :nth-child(odd) 控制，移动端强制单列
左右错落排版提升视觉节奏感，但实现上不要用 JS 判断奇偶，纯 CSS 就够了：li:nth-child(odd) { left: 0; } li:nth-child(even) { right: 0; }。前提是 <ol></ol> 下只有 <li>，否则选择器会错位。
移动端必须收束为单列，否则小屏上左右内容挤压重叠。用媒体查询切换即可：
@media (max-width: 768px) {
.timeline li {
left: auto;
right: auto;
text-align: center;
}
.timeline::before {
left: 50%;
transform: translateX(-50%);
}
}注意：别只改文字对齐，伪元素竖线也要重新居中，否则线会偏左或偏右。
用 CSS 变量管理颜色、间距和动画延迟
简历可能要适配深色模式、换主题色或调整密度。硬编码 #666、2rem 或 0.3s 会让后续修改变成全局搜索替换。直接定义变量更可控：
:root {
--timeline-line-color: #e0e0e0;
--timeline-dot-size: 10px;
--timeline-gap: 2.5rem;
--timeline-delay-step: 0.25s;
}
<p>.timeline li:nth-child(1) { --timeline-index: 0; }
.timeline li:nth-child(2) { --timeline-index: 1; }
.timeline li:nth-child(3) { --timeline-index: 2; }</p><p>li::before {
animation-delay: calc(var(--timeline-index) * var(--timeline-delay-step));
}真正麻烦的是动画节奏和响应式断点的耦合——比如在 iPad 尺寸下，左右交替还保留，但间距需缩小；而变量能让你在一处改值，全链路同步生效。这点在交付多个主题版本时尤其关键。
