伪元素画时间轴需明确分工与定位：主轴线用.timeline::before绝对定位贯穿全高，圆点用.timeline-item::before居中锚定，连接线另用::after；小屏断线因父容器高度塌陷，需用::after撑高；响应式仅调left、transform、width等属性，避免重复定位声明。
伪元素能画出时间轴节点和连接线，但直接套用 ::before 或 ::after 很容易错位、断开或遮挡——关键不在“能不能画”，而在“谁画什么”和“在哪画”。
为什么 ::before 画的竖线在小屏下会“断掉”
常见错误现象：.timeline::before 设了 height: 100%，但小屏只显示半截。这不是媒体查询漏写，而是父容器没撑起可计算的高度来源。
- 绝对定位的伪元素依赖父容器有明确的
height或min-height，否则100%无从参照 - 若父容器仅靠子项内容撑高，而子项用了
position: absolute，它们已脱离文档流，父容器高度会塌陷 - 补救方法：用另一个伪元素（如
.timeline::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：不参与轴线绘制，只做视觉锚点，left: 50%+top: 50%+transform: translate(-50%, -50%) - 连接短线（比如从圆点向右延伸的横线）另起一层，用
.timeline-item::after，并确保其z-index高于内容但低于圆点
响应式切换时只动 left、transform 和 width
很多人在 @media 里重复写 position: absolute 或重设 top/bottom，结果维护时漏掉某条规则，整条线就偏了。
- PC 端：轴线
left: 50%+transform: translateX(-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元素直接比大小 - 特别注意 Safari 旧版本对伪元素
z-index的解析差异，建议加isolation: isolate显式隔离
真正难的不是画一条线，而是让这条线在字体缩放、内容增减、滚动、多层定位共存时始终稳定——这些细节不会报错，但上线后会在某个用户的小屏上悄悄崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
