用::before和::after画垂直连接线最轻量，需设父元素position: relative，伪元素绝对定位并用height+background绘制竖线，配合:not(:first-child)等控制显隐，注意阴影、响应式及IE11兼容性。
怎么用 ::before 和 ::after 画垂直连接线
伪元素是画时间轴连线最轻量的方式，不用额外 HTML 标签，也不依赖 JS。关键在于让每个时间点的 ::before 或 ::after 绘制一条绝对定位的竖线，再用 top/bottom 控制起止位置。
- 每个时间项（如
.timeline-item）设position: relative，否则伪元素无法相对定位 - 第一项通常不画上线，最后一项不画下线——得用
:not(:first-child)或:not(:last-child)控制 - 竖线宽度别用
border-left混淆：它会撑开父容器宽度；改用height+background更可控 - 示例：给中间项加连接线：
.timeline-item:not(:first-child)::before { content: ""; position: absolute; left: 12px; top: -50%; height: 100%; width: 2px; background: #e0e0e0; }
阴影只加在时间点卡片上，别污染整条轴
时间轴主干（那根竖线）本身不该有阴影，否则虚化、重叠、发糊。阴影必须严格限定在每个 .timeline-item 的卡片区域，且要避开伪元素绘制的连接线。
- 用
box-shadow而非text-shadow或filter: drop-shadow()：后者会把伪元素也一并模糊，导致连接线变粗或毛边 - 避免
box-shadow: 0 2px 8px rgba(0,0,0,0.15)这类“全向”阴影，容易盖住左侧内容；优先用box-shadow: 2px 0 6px rgba(0,0,0,0.08)（仅右侧偏移） - 如果卡片用了
transform: translateX(-10px)错位布局，记得把box-shadow写在 transform 后面，否则阴影不会随位移
响应式断点里，垂直轴转水平轴时伪元素容易错位
PC 端垂直、移动端水平是常见需求，但 ::before 的 left/top 值在媒体查询里没同步更新，会导致连接线漂移甚至消失。
- 别只改
flex-direction：水平布局时，原用于竖线的::before应该变成横线，left→top，height→width，top→left - 水平模式下，连接线建议从时间点右边缘出发，而非中心——否则和文字挤在一起；可用
right: 100%+transform: translateX(50%)精准对齐 - 真机调试时注意 Safari 对
transform+absolute伪元素的渲染延迟，可加will-change: transform缓解
IE11 下 ::before 伪元素不显示连接线？检查 display 和 content
IE11 对伪元素的 display: block 支持不完整，尤其当父元素是 display: flex 时，::before 默认不渲染，哪怕写了 content: ""。
立即学习“前端免费学习笔记（深入）”；
- 必须显式写
display: block（或inline-block），不能依赖默认值 -
content值不能为空字符串以外的形式，content: " "（空格）在 IE11 中可能被忽略，坚持用content: "" - 避免在伪元素上用
transform: translateY()做垂直居中——IE11 不支持，改用top: 50%+margin-top: -1px（已知高度时）更稳 - 如果整个时间轴需要兼容 IE11，放弃
gap和place-items，用margin控制间距
z-index 层级和 will-change 触发时机都会影响最终是否“看起来连得上”。这些地方不动手调一次，光看文档根本意识不到。 
