CSS如何设计一个带阴影的垂直时间轴_通过伪元素连接各时间点css

用::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 值在媒体查询里没同步更新，会导致连接线漂移甚至消失。

百宝箱

百宝箱是支付宝推出的一站式AI原生应用开发平台，无需任何代码基础，只需三步即可完成AI应用的创建与发布。

下载

• 别只改 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 控制间距