伪元素竖线断掉的根本原因是父容器高度塌陷，解决方法是给.timeline设min-height或透明占位伪元素；圆点错位因定位上下文混乱，需统一设.timeline为relative并隔离层叠上下文。
伪元素画的竖线在小屏下“断掉”怎么办
根本原因是 .timeline::before 设了 height: 100%，但父容器没撑起可计算的高度。子项若用了 position: absolute，会脱离文档流，导致父容器高度塌陷。
解决方法不是加媒体查询补 height，而是让父容器有稳定高度来源：
- 给
.timeline加min-height: min-content或显式min-height: 300px（根据内容预估） - 或用一个透明占位伪元素：
.timeline::after { content: ""; display: block; padding-top: 1px; }，不干扰视觉但强制撑高 - 确保所有时间项（
.timeline-item）没意外触发display: contents或visibility: hidden，否则也会影响父容器高度计算
左右对称布局时圆点位置飘忽、错列
这不是 left 值写错了，而是伪元素定位上下文没隔离。当多个 position: relative 祖先嵌套，.timeline-item::before 会相对于最近的那个已定位祖先找位置，结果偏移不可控。
必须统一锚点：
-
.timeline设position: relative+z-index: 1，建立独立层叠上下文 -
.timeline-item不设position，让它默认 static，避免切割父层叠上下文 - 圆点统一用
.timeline-item::before { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); }，所有偏移都基于.timeline - 大屏左右分栏时，别靠
left: 24px和left: calc(50% + 24px)手动算——改用grid-column: 1 / 2或grid-column: 2 / 3配合justify-items: center
响应式切换时连接线颜色/粗细/端点突然失真
用 border-left 画竖线在高清屏缩放后容易发虚，且无法做圆角或渐变；linear-gradient 是更稳的选择。
关键不是换写法，而是控制变量范围：
- 竖排时：用
background: linear-gradient(to bottom, #999 0%, #999 100%)，宽度固定2px - 横排时（
@media (min-width: 768px)）：只改方向为to right，其他参数不动 - 端点圆角统一用
background-size: 2px 100%+background-repeat: repeat-y，避免用border-radius导致两端变形 - 别在媒体查询里重写整个
background声明，只覆盖linear-gradient的方向和尺寸，减少维护遗漏风险
字体缩放后圆点和文字不对齐
固定 top: 20px 或 margin-top: 1rem 在不同字号下必然错位。真正可控的是相对定位关系。
用 CSS 变量驱动垂直居中逻辑：
.timeline-item { --dot-offset: 50%; }.timeline-item::before { top: var(--dot-offset); transform: translateY(-50%); }- 媒体查询中只调变量：
@media (max-width: 768px) { .timeline-item { --dot-offset: 0; } }，竖排时圆点贴顶 - 配合
font-size: clamp(0.875rem, 4vw, 1.125rem)，让文字和圆点同步缩放
伪元素响应式最难缠的不是写法本身，而是它依赖的上下文太隐蔽——position: relative 漏一个、z-index 冲突一层、height: 100% 缺一个参照，整条线就断在你看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
