用::before生成刻度必须设置content: ""触发渲染，并配合position: absolute定位；每个.timeline-item需设position: relative，宽高须明确，推荐top: 50%; transform: translateY(-50%)垂直居中对齐。
用 ::before 生成刻度必须配合 content 和定位
伪元素本身不占文档流，也不渲染内容，除非显式设置 content。时间轴刻度是纯视觉装饰，所以得靠 content: "" 触发渲染，再用 position: absolute 定位到父容器上。常见错误是只写 ::before 样式却漏了 content，结果什么也不显示。
实操建议：
- 每个刻度项（比如
.timeline-item）需设position: relative，否则::before的绝对定位会相对于最近的定位祖先，容易错位 -
::before宽高要明确，比如width: 2px; height: 10px;，不能依赖内容撑开 - 避免用
top: 0硬绑顶部——时间轴常是垂直方向，刻度应在中线对齐，推荐top: 50%; transform: translateY(-50%);
CSS 无法真正“循环”，只能靠 HTML 结构或 JS 配合
CSS 没有 for 循环语法，::before 不会自动为 n 个子元素生成 n 个刻度。所谓“动态生成”，本质是：要么手写足够多的 .timeline-item 元素，让每个都带一个 ::before；要么用 JS 动态插入元素，再统一加样式。
常见错误现象：
- 只写一个
.timeline容器 + 一个::before，指望它画出一排刻度 → 实际只渲染一个伪元素 - 用
:nth-child(n)控制颜色或偏移，但没意识到它依赖真实 DOM 节点数量，数据少时后面刻度直接消失
性能提示：纯 CSS 方案在几百个刻度时仍流畅；若需上千个且频繁增删，JS 创建 span 或 div 更可控，也方便绑定点击事件。
刻度间距用 margin 或 transform: translateX() 更可靠
别用 left: 20px * n 这类计算——CSS 不支持变量乘法（calc() 里也不能用 n）。实际能用的只有固定值、百分比、或基于父容器尺寸的计算。
推荐做法：
- 父容器设
display: flex; flex-direction: column;，子项用margin-bottom控制间距，刻度画在子项内部，位置自然对齐 - 若必须等距偏移多个伪元素（比如横向时间轴），改用
transform: translateX(calc(var(--step) * (n - 1))→ 行不通，因为n不是 CSS 变量；正确方式是给每个子项加不同--step-index自定义属性，再在::before中读取：transform: translateX(calc(var(--step) * (var(--step-index) - 1)) - 兼容性注意：
transform在 IE10+ 支持良好，但calc()里嵌套var()需要 Chrome 62+/Firefox 55+
响应式刻度容易断层，关键在单位和基准选择
用 px 写死刻度大小和间距，缩放屏幕时会糊成一片或露出大片空白。真正适配的要点不是“让刻度变小”，而是“保持视觉密度稳定”。
实操建议：
- 刻度宽度/高度用
rem或em，随根字体缩放；间距用%或vh/vw（比如垂直时间轴用margin-bottom: 5vh;） - 避免在
::before里写媒体查询单独调刻度——维护成本高；改为统一用相对单位，再通过父容器font-size或transform: scale()整体缩放 - 移动端常需隐藏部分刻度文字，但刻度线本身保留：用
@media (max-width: 768px) { .timeline-item span { display: none; } }，而不是删伪元素
最易被忽略的一点：伪元素的 z-index 默认为 auto，当时间轴内容有重叠或阴影时，刻度可能被盖住，务必显式设 z-index: 1 或更高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
