伪元素画线需管控容器高度、定位上下文与层叠关系：父容器须有明确高度来源，::before 专绘主轴线，::after 或子项伪元素分担节点与连接线，响应式仅调整单一变量（如 left、top、width），并用 position: relative + z-index 建立独立层叠上下文。
伪元素画线本身没问题，但直接套用 ::before 或 ::after 很容易在响应式切换时断开、偏移或错位——根本原因不是写法错，而是没管住容器高度、定位上下文和层叠关系。
为什么 ::before 画的竖线在小屏下会“断掉”
常见错误现象：.timeline::before 设了 height: 100%，但小屏下只显示半截。这不是媒体查询漏写了，而是父容器没撑起可计算的高度来源。
- 绝对定位的伪元素依赖父容器有明确的
height或min-height，否则100%无从参照 - 若父容器仅靠子项内容撑高，而子项用了
position: absolute，它们已脱离文档流，父容器高度会塌陷 - 正确做法：用另一个伪元素（如
::after）在父容器上画一条透明占位线，设content: ""+display: block+padding-top: 1px，不干扰视觉但强制撑高
::before 和 ::after 分工要明确
把“轴线”和“节点标记”混在一个伪元素里，后期改样式、调间距、切响应式都会互相干扰。必须拆开职责：
- 主轴线统一用
.timeline::before，只负责贯穿全高：设position: absolute+top: 0+bottom: 0+left: 50%+transform: translateX(-50%) - 每个时间点的圆点统一用
.timeline-item::before，不参与轴线绘制，只做视觉锚点 - 连接线（比如斜线或带箭头的线）另起一层，用
.timeline-item::after，并确保其z-index高于内容但低于圆点，避免遮挡
媒体查询里只动 left、transform 和 width，不动 position
很多人在 @media 里重复写 position: absolute 或重设 top/bottom，结果维护时漏掉某条规则，整条线就偏了。
立即学习“前端免费学习笔记（深入）”；
- PC 端：轴线
left: 50%+transform: translateX(-50%)，圆点用left: 50%+transform: translate(-50%, -50%) - 平板端（
max-width: 1024px）：轴线left: 24px，圆点left: 0，其他不变 - 手机端（
max-width: 768px）：轴线改用width: 100%+height: 2px+top: 50%+transform: translateY(-50%)，变成横线；圆点改用top: 0+left: 0+transform: none
圆点位置飘忽？检查是否触发了新的层叠上下文
当时间轴和 sticky 导航栏、fixed 弹窗共存时，::before 圆点突然被盖住或穿透，大概率是 z-index 冲突，且你没意识到伪元素也受层叠上下文影响。
- 给
.timeline加position: relative+z-index: 1，建立独立层叠上下文 - 所有伪元素的
z-index值必须在这个上下文内比较，不能和 body 下其他 fixed 元素硬比大小 - 避免在
.timeline-item上同时设position: relative和z-index，它会切割父层叠上下文，导致圆点层级失效
真正难的不是画出那条线，而是让每一段响应式逻辑都只负责一个变量：宽度变，就只调 left；方向变，就只换 top/height；内容密度变，就只改 gap 或 font-size。任何试图“一劳永逸”地用一个规则覆盖全部场景的做法，都会在第三次需求变更时崩溃。
