::after 更适合加斜杠分隔符，因其附着在当前项上，逻辑直白且不受dom干扰；而::before依赖兄弟选择器，易受空节点、动态元素及aria-current影响，兼容性与语义性均较差。
为什么 ::after 比 ::before 更适合加斜杠分隔符
因为 ::after 附着在当前项上，逻辑更直白：“有后继项，我就加符号”；而 ::before 依赖兄弟关系（比如 .breadcrumb-item + .breadcrumb-item::before），一旦 DOM 中混入空文本节点、注释或动态插入的元素，选择器就失效。另外，::before 无法区分当前页（aria-current="page"）和普通项，改了 content 会一视同仁。
实操建议：
- 用
.breadcrumb-item:not(:last-child)::after最稳，语义清晰，兼容性好 - 若需进一步排除当前页，写成
.breadcrumb-item:not([aria-current])::after - 避免用
:last-of-type—— 当末尾是<span></span>或<div> 时容易误判 <h3> <code>content不显示？先查这三件事伪元素不渲染，90% 是卡在这三个地方：没设
content、父元素是inline且没显式声明布局行为、外层容器裁掉了溢出内容。实操建议：
-
content必须显式写，哪怕只是content: "/"或content: ""；content: none不合法，不会生效 -
<a></a>默认是inline，::after在里面无法控制宽高和垂直对齐，得加display: inline-flex或display: inline-block - 如果面包屑套在
flex容器里且设了overflow: hidden，伪元素可能被裁掉——检查父级是否意外截断
分隔符总偏上/偏下？别调
margin-top默认按 baseline 对齐，文字和符号基线不同，尤其在
font-size 时特别明显。靠 <code>margin微调是饮鸩止渴，换设备或字体就崩。实操建议：
- 统一加
vertical-align: middle，强制居中 - 再设
line-height: 1，切断父级行高的干扰 - 若仍有 1px 偏移，用
transform: translateY(-1px)，它不影响文档流，也不随缩放失准 - 避免用
em或rem设margin，符号间距应独立于字体大小，px或ch更可控
小屏下隐藏分隔符但不能丢语义
直接
display: none会让屏幕阅读器跳过分隔逻辑，破坏导航结构；visibility: hidden又占位，导致布局晃动。实操建议：
- 媒体查询里直接重置
content: ""，伪元素不生成，零副作用 - 如果必须保留视觉占位（比如为了维持 flex 项高度一致），用
clip-path: inset(100%)，彻底裁掉但保留 - 千万别给伪元素加
role="separator"—— 这反而会让读屏器重复播报“separator”，打断阅读流
真正麻烦的是多层级嵌套或 IE11 兼容场景：伪元素无法嵌套，
:not(:last-child)在 IE11 下会被整个忽略，content里的中文斜杠或箭头在旧浏览器里常渲染异常。这些不是边缘问题，而是上线前必须验证的硬伤。 -
