::after比::before更适合放分隔符，因它精准位于“当前项之后、下一项之前”，li:not(:last-child)::after可稳定命中非末项尾部；而::before需排除首项，动态渲染易出错，且flex布局中对齐更可控。
为什么::after比::before更适合放分隔符
因为分隔符逻辑上是“当前项之后、下一项之前”的符号，li:not(:last-child)::after能精准命中所有非末项的尾部位置；用::before则需排除首项（li:not(:first-child)::before），在动态渲染或服务端注入时容易漏掉第一个li的判断逻辑。另外，::after与链接文字同级排布，flex布局中更易控制对齐和收缩行为。
content值写""还是none？
必须写content: "/"这类非空字符串——content: ""会创建一个空节点，仍占位、可被选中、影响flex计算；content: none才是彻底移除伪元素。常见错误是误设content: ""后发现分隔符“看不见但占空间”，尤其在white-space: nowrap下导致文字溢出容器。
分隔符被裁剪或错位的三个高频原因
- 父容器（如
nav或ol）设置了overflow: hidden，而::after用了position: absolute或负margin溢出 -
li未设min-width: 0，在flex容器中无法收缩，挤压::after导致换行或偏移 - 未给
li设position: relative，却对::after使用left/right定位，结果相对的是body而非本项
箭头图标用字符还是SVG？
优先用 Unicode 字符（如"\203A" → 或"\00bb" »），加载零延迟、无请求、无障碍友好；若必须用 SVG，应内联并加aria-hidden="true"，避免屏幕阅读器误读；禁用background-image方式——字体加载失败或缩放时图标会消失或模糊，且无法继承color。
li的min-width: 0和position: relative这对组合：不设前者，小屏下文字不截断；不设后者，::after定位完全失控，且这种问题在桌面端预览时根本看不出来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
