最稳方案是用 .breadcrumb-item:not(:last-child)::after 添加分隔符，避免 + 选择器失效和语义缺失；需设 content、vertical-align: middle 和 line-height: 1，小屏用 content: "" 隐藏，确保响应式与无障碍兼容。
直接用 ::after 给非末项加符号最稳，别碰 ::before 和 display: inline 的组合——后者会让分隔符对齐发飘，还容易在小字体下错位。
为什么 .breadcrumb-item + .breadcrumb-item::before 不推荐覆盖
Bootstrap 默认靠这个选择器塞 /，但它是「前一项后面」的逻辑，实际渲染时依赖兄弟关系，一旦 DOM 里混入空文本节点或注释，+ 就失效；更麻烦的是，它无法区分当前页（aria-current="page"）和普通项，改了 content 会一视同仁。你真要换箭头或图标，得同时处理语义、RTL、缩放、无障碍三重问题。
- 优先清掉原规则：
.breadcrumb-item::before { content: none !important; } - 改用
.breadcrumb-item:not(:last-child)::after，精准锚定“有后继项”的元素 - 如果当前页用了
aria-current="page"，可进一步收紧为.breadcrumb-item:not([aria-current])::after，比:not(:last-child)更语义化
::after 分隔符不显示？先查这三件事
伪元素不渲染，90% 是卡在这三个地方：没设 content、父元素是 inline 且没显式声明布局行为、或者外层容器裁掉了溢出内容。
-
content必须显式写，哪怕只是content: ">"或content: ""；空字符串也比不写强 -
.breadcrumb-item a默认是inline，::after在里面无法控制宽高和垂直对齐，得加display: inline-flex或display: inline-block - 如果面包屑套在
flex容器里且设了overflow: hidden，伪元素可能被裁掉——检查父级是否意外截断
分隔符总偏上/偏下？别调 margin-top
默认按 baseline 对齐，文字和符号基线不同，尤其在 font-size 时特别明显。靠 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%)，彻底裁掉但保留在可访问树中 - 别用
opacity: 0，它仍触发读屏器播报，且动画时可能闪现
真正难的不是加符号，而是让符号在所有尺寸、所有字体、所有读屏环境下都“刚刚好”——vertical-align 和 content 的组合必须一起调，漏掉一个，移动端就错位，无障碍测试就报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
