用 ::after 给面包屑加斜杠分隔符最稳妥：仅对非末项（a:not(:last-child)）添加 content: "/"，ie11 用 a + a::before 替代；小屏用 content: "" 隐藏；序号与分隔符应分置 li 和 a 以避免叠加错乱。
用 ::after 给面包屑加斜杠分隔符最稳妥
纯 CSS 实现分隔符，不依赖额外 HTML 元素，也不用 JS 拼接，::after 是首选。它能精准控制每个分隔符的位置和样式，且天然避开首尾——你只需要给非末项加伪元素就行。
常见错误是直接给所有 li 或所有 a 加 ::after，结果首页后面也多了个斜杠，或者最后一个链接后出现多余符号。
- 正确做法：用
:not(:last-child)限定作用范围，比如.breadcrumb a:not(:last-child)::after - 分隔符内容必须用
content: "/"，不能写成content: " / "（前后空格会破坏对齐） - 如果分隔符要垂直居中，优先用
vertical-align: middle配合display: inline-block，别依赖line-height或margin-top，后者在不同字体下容易偏移
IE11 下 :not(:last-child) 不生效怎么办
IE11 对复合伪类支持有限，:not(:last-child) 会被整个忽略，导致所有项都加了分隔符。这不是 bug，是规范实现差异。
绕过方式不是降级到 JS，而是换一种选择器逻辑：
立即学习“前端免费学习笔记（深入）”；
- 改用相邻兄弟选择器：
.breadcrumb a + a::before，给「后面还有兄弟的链接」前面加符号（即从第二个开始） -
content改为"/ "（斜杠+空格），这样视觉上等效于“前一项后加分隔符” - 注意：这个写法在现代浏览器里完全兼容，无需 hack；但若面包屑用了
flex布局且子项有margin，需确认::before的定位不受影响
响应式断点里分隔符要不要隐藏
小屏下空间紧张，分隔符常被收掉，但直接 display: none 会导致布局跳变——因为伪元素虽不可见，仍占文档流（除非设为 position: absolute）。
- 推荐用
visibility: hidden+width: 0+overflow: hidden组合，彻底消除占位 - 更干净的做法是媒体查询里直接重置
content: ""，伪元素本身不渲染，无任何副作用 - 如果用 SVG 图标代替斜杠（如
content: url("sep.svg")），注意 IE11 不支持url()在content中，得 fallback 成字符
用 counter-increment 动态生成序号时，分隔符位置容易错乱
当面包屑同时需要「1. 首页 / 2. 分类 / 3. 文章」这类带序号的结构时，序号通常靠 counter-increment + ::before 实现，而分隔符又用另一个 ::after ——两个伪元素叠加，顺序和对齐极易出问题。
- 务必给序号和分隔符都设
display: inline-block，否则默认inline下基线对齐不一致，数字和斜杠看起来一高一低 - 序号的
::before和分隔符的::after不能共存于同一个元素（比如都挂载在a上），否则渲染顺序难控；建议序号放li，分隔符放a，用层级隔离 - Chrome 有时会对多个伪元素的
vertical-align计算异常，加一句font-size: 0在父容器上，再单独给伪元素设字号，能强制重置对齐基准
伪元素看着轻量，但一旦涉及多层嵌套、动态计数或跨浏览器，细节就全在选择器边界和 display 行为里。漏掉一个 :not() 或没处理好 inline 元素的基线，整条导航就歪了。
