css伪类::before/::after无法在多层嵌套树形结构中生成真正连续的连接线，因其仅作用于单个元素盒模型、无全局坐标系，连线实为视觉假象；需规避flex/grid干扰、兼容性问题及动态增删失效等陷阱。
伪类 ::before 和 ::after 无法穿透多层嵌套生成连续连接线
纯 CSS 伪类在深度嵌套的树形结构（比如无限层级的 ul > li > ul > li）中，没法自动“感知”父级或兄弟节点位置，更不能跨元素画一条连贯的竖线或折线。你看到的“连线”，其实是每个节点自己用伪类拼出来的视觉假象。
常见错误现象：::before 在子 li 里画了一条竖线，但上一级 li 的底部没对齐、缩进错位、或者最后一级突然断开——本质是每个伪元素只作用于单个元素盒模型，没有全局坐标系。
- 连接线不是“画出来”的，而是靠
border-left、height、top、transform等属性“挤”出来的视觉效果 - 层级越深，
padding-left和position: relative的累积误差越明显 - 如果某级
li没设position: relative，它的子级::before会相对于最近的定位祖先定位，导致偏移失控
display: flex + grid 混合布局会让连接线错位甚至消失
树形结构一旦用 flex 控制缩进或对齐，伪类的 absolute 定位就容易失效：因为 flex 容器的主轴/交叉轴行为会干扰 top/left 计算；而 grid 的隐式轨道又会让 ::before 被裁剪或脱离预期网格线。
使用场景：需要左对齐文字 + 右侧操作按钮 + 左侧垂直连接线的目录项。
立即学习“前端免费学习笔记（深入）”；
- 避免在树节点容器上同时设
display: flex和position: relative，优先用padding-left控制缩进 - 若必须用
flex，把连接线逻辑移到li的子容器（如<div class="tree-node">），并在该容器上设 <code>position: relative -
grid-template-columns中如果用了minmax()或fit-content，可能导致::before的left值被重算，建议固定左侧轨道宽度（如24px）专供连线 - 统一用
top: 100%+margin-top: -1px对齐父节点底边，比transform兼容性高 - 竖线高度别依赖
height: 100vh，改用height: calc(100% + 20px)配合overflow: visible，防止被父容器裁掉 - Safari 15.4–15.6 中
::after的border-right在zoom: 0.9下会模糊，直接禁用缩放或换用background-image: linear-gradient() - 所有连接线样式必须基于元素固有结构（如
li:not(:last-child) > ul），避免依赖临时 class - 新增节点后，确保它和父级有相同 HTML 结构（比如都带
data-level="2"），否则[data-level="2"]::before规则不会命中 - 不要用
visibility: hidden隐藏节点来“暂停”连线逻辑，伪类仍会渲染；改用display: none或移除元素
IE11 和 safari 15.6 之前对 transform: translateY() 在伪类中的兼容性差
想让连接线从父节点底部自然垂下？很多人用 transform: translateY(100%) 把 ::before 下移，但在 IE11 里它不生效，在旧 Safari 里可能错位 1px —— 因为这些浏览器对伪元素 + 百分比 transform 的盒模型解析不一致。
性能影响：用 top: 100% 替代 transform 更稳，但会触发 layout，不过树形结构通常 dom 节点不多，可忽略。
动态增删节点时，CSS 伪类连接线不会自动重绘
用 js 插入新 li 后，你发现新节点没连接线，或者旧节点的线变短了——这不是 JS 没触发重排，而是伪类样式本身没“状态”，它只响应元素是否存在，不响应“这个元素是不是最新加进来的”。
容易踩的坑：监听 MutationObserver 后给新节点加 class 来激活伪类，结果 class 名写错，或者忘了在 CSS 里补对应规则。
真实项目里最麻烦的不是怎么画线，而是当节点展开收起、异步加载、键盘导航焦点移动时，连接线得跟着 DOM 状态实时对齐——这时候伪类已经不够用了，得切到 SVG 或 canvas。但只要结构稳定、层级可控，CSS 方案依然够用。