bootstrap 5 面包屑分隔符应通过 css 变量 --bs-breadcrumb-divider 自定义，如 .breadcrumb { --bs-breadcrumb-divider: ">" }，避免修改伪元素或 html 结构，以保障可访问性、rtl 和响应式支持。
Bootstrap 5 的面包屑导航样式自定义，核心就一条：改 --bs-breadcrumb-divider 这个 CSS 变量，别碰 HTML 结构、别重写伪元素、更别用 JS 插入分隔符——否则可访问性、响应式、RTL 支持全会出问题。
怎么用 CSS 变量改分隔符（最简方式）
Bootstrap 5 把分隔符完全交给 --bs-breadcrumb-divider 控制，值必须是带引号的字符串。只要确保你的 CSS 在 Bootstrap 样式表之后加载，一行就能生效：
.breadcrumb {
--bs-breadcrumb-divider: ">";
}
- 支持 Unicode 字符，比如
"\276F"（渲染为 ⟯）、"\00BB"（»），比字体图标兼容性高得多 - 移动端小字号下，
"|"比"/"更易识别，尤其在深色背景上 - 如果用了 SCSS，直接在
$breadcrumb-divider变量里覆盖，编译时注入，更干净 - 千万别写成
content: ">"去覆盖伪元素——这会绕过变量机制，导致后续升级或主题切换失效
为什么直接改 ::before 伪元素容易翻车
默认规则是 .breadcrumb-item + .breadcrumb-item::before 插入分隔符，看着简单，但实际埋了三个坑：
- 选择器太宽泛：一旦你加了额外 wrapper 或动态插入节点，+ 邻居选择器就失效，箭头可能漏掉或错位
- 无障碍冲突：屏幕阅读器会把
content: "/"读作 “slash”，而语义上它只是装饰；强行覆盖 content 容易触发重复播报 - RTL 页面下，
/和>的书写方向不一致，硬塞进去会导致视觉顺序和逻辑顺序错乱，--bs-breadcrumb-divider会自动适配 direction - 想加 SVG 图标？别用
::before { content: url(...) }—— 这种写法不支持伪元素内联样式，且无法继承currentColor
加图标分隔符的实操要点
真要用图标（比如右箭头 SVG），不是不能，但得守住两个底线：结构合法、语义清晰。
- 图标必须用内联
<svg aria-hidden="true"></svg>，不能依赖字体图标（<i class="bi bi-chevron-right"></i>），否则字体未加载时留白 - SVG 要设
width和height（如1rem），别只靠font-size缩放，否则高 DPI 屏幕下糊成一团 - 如果路径太长需折叠，中间项不能直接删 DOM，得用下拉菜单包裹，并配
aria-expanded和aria-haspopup="menu" - 所有图标都必须配合
visually-hidden文本说明（比如“更多层级”），供键盘用户理解操作意图
自定义带来的隐性代价
改得越花哨，越要小心三件事：缩放、高对比度模式、键盘焦点流。
- 给分隔符加 margin 或 transform，可能让
outline偏移，键盘 Tab 时焦点框飘在空中 - 用 background-image 替代字符分隔符？某些 Windows 高对比度模式会强制禁用 background，结果分隔符全消失
- 移动端小屏下，自定义箭头宽度超过 1.2em 就容易撑破容器，引发横向滚动——这时该考虑截断逻辑，而不是调大图标
- 所有改动必须通过
aria-current="page"显式标记当前页，这是屏幕阅读器唯一依赖的语义锚点，样式再炫也不能动它
