用::before/::after实现轻量级引导线需设display:block和absolute定位，避免transform继承，用calc()相对定位、repeating-linear-gradient做“蚂蚁线”，配合scaleX()进度控制与transition优化性能。
用 ::before 和 ::after 在图表节点上“长出”引导线
伪元素不是装饰补丁，而是轻量级的视觉锚点。给一个数据节点（比如 .chart-node）加引导线，核心是让 ::before 或 ::after 承担线条角色，而不是额外塞一个 <div>。这样既不污染 DOM，又能精准绑定节点状态（比如 <code>.chart-node.active::after）。
常见错误是直接写 content: '' 后就设 width 和 background，结果线条不出现——因为伪元素默认是 inline，没有宽高。必须加 display: block 或 inline-block，再配合 position: absolute 定位。
-
::before适合做“入向线”（从别处连来），::after更常用于“出向线”（指向下一个节点） - 若节点本身有
transform（如缩放、旋转），伪元素会继承，容易偏移；建议在伪元素上用transform: none覆盖 - 避免用
top/left硬编码像素值；优先用calc(50% - 2px)这类相对计算，适配不同尺寸节点
用 repeating-linear-gradient 实现“流动光效”引导线
静态线没说服力，动态线才像真在传输数据。CSS 里最省性能的流动效果，就是用 repeating-linear-gradient + animation 模拟虚线滚动——也就是常说的“蚂蚁线”。它比 stroke-dashoffset 更兼容，且无需 SVG。
关键不是“怎么动”，而是“动得是否可控”：周期长度必须和动画时长匹配，否则会出现跳帧或卡顿。比如虚线单元是 12px（实段6px + 空段6px），那么 @keyframes 的 to 值就得设为 background-position: 12px 0，动画时长设为 1.2s，才能匀速平滑。
立即学习“前端免费学习笔记（深入）”；
- 方向要对齐：水平线用
90deg，垂直线用0deg，斜线则需按实际角度调整 - 颜色别用纯黑/白：流动线需要对比度，但也要柔和，推荐
#3b82f6这类带透明感的科技蓝 - 别在大量节点上同时开流动动画：超过 10 条建议加
animation-play-state: paused，hover 时再running
用 transform: scaleX() 配合 JS 控制引导线进度
当引导线要表达“已完成连接”或“数据正在加载中”，就不能只靠循环动画。这时候得把线当进度条用：scaleX(0) 表示未连接，scaleX(1) 表示满长，中间值由 JS 注入 CSS 变量控制。
比起直接改 width，transform: scaleX() 性能更好（触发合成层），且不会影响布局流。但要注意：它默认以元素左上角为原点缩放，所以得加 transform-origin: left center，让线条从左往右“生长”。
- JS 更新方式示例：
node.style.setProperty('--line-progress', '0.72')，CSS 中用transform: scaleX(var(--line-progress)) - 务必加
transition: transform 0.3s ease-out，否则变化生硬；但别设太长，超过 0.4s 用户会觉得响应迟钝 - 如果节点位置会变（比如响应式重排），避免用绝对定位的伪元素；改用
position: fixed+getBoundingClientRect()动态计算坐标（此时伪元素退场，换真实<div> 更稳妥）<h3>多节点连线时，伪元素层级和裁剪容易被忽略</h3> <p>三个以上节点连成链路时，引导线常互相遮挡或溢出容器。这不是样式写错了，而是 <code>z-index和overflow的组合陷阱。伪元素默认和父元素同层叠上下文，
z-index无效。解决办法只有两个：要么给父节点设position: relative+z-index，让所有子伪元素共享该上下文；要么干脆放弃伪元素，用真实 DOM 元素 +isolation: isolate创建独立层叠环境。- 容器
overflow: hidden会裁掉伪元素——哪怕它已用position: absolute移出父盒；解决方法是把容器设为overflow: visible，或用clip-path精确裁剪 - 圆角节点连斜线时，伪元素的起点容易卡在圆角内侧；用
top: 50%; transform: translateY(-50%)替代固定top: 8px，能自适应不同圆角大小 - 移动端 touch 区域小，引导线太细（
height: 2px）会导致点击失效；至少设min-height: 8px并加pointer-events: none，避免干扰交互
- 容器
