Bootstrap 4.6+ 和 5.x 应使用 CSS 变量 --bs-breadcrumb-divider 控制分隔符，弃用伪元素覆盖；该变量需英文双引号包裹、在 Bootstrap 样式后加载，否则失效。
Bootstrap 4.6+ 和 5.x 的分隔符**不该用伪元素美化**——它已弃用 .breadcrumb-item + .breadcrumb-item::before 这类硬覆盖方式，改用 CSS 变量控制更稳定、可访问、支持 RTL。只有在旧版（如 Bootstrap 4.3 或更低）且无法升级时，才需手动操作伪元素。
为什么直接覆盖 .breadcrumb-item + .breadcrumb-item::before 容易失效
Bootstrap 5 默认不依赖该选择器渲染分隔符；即使你写了样式，也可能被后续版本忽略。开发者工具里常看到该伪元素存在，但实际生效的是 --bs-breadcrumb-divider 变量。若强行覆盖，!important 都不一定赢过变量计算优先级，尤其在深色模式或 RTL 场景下，箭头方向错乱、颜色不随主题切换等问题频发。
--bs-breadcrumb-divider 是唯一推荐路径
所有 Bootstrap 4.6.2+ 和 5.x 版本都支持这个 CSS 变量，值必须是带英文双引号的字符串：
- 单个面包屑：在
<ol class="breadcrumb"></ol>上加style="--bs-breadcrumb-divider: '>';" - 全局修改：在
:root中定义--bs-breadcrumb-divider: "›";，确保自定义 CSS 在 Bootstrap 样式表之后加载 - 支持 Unicode（
"\2192"）、HTML 实体（">"不行，得写成">"转义后为">"，但更建议直接用">"字符） - 别写成
data-bs-breadcrumb-divider或divider属性——它只响应 CSS 变量作用域
如果真要动伪元素（仅限旧版 Bootstrap）
必须满足三个硬性条件，否则分隔符会消失或错位：
立即学习“前端免费学习笔记（深入）”；
- HTML 结构必须是
<nav><ol class="breadcrumb"><li class="breadcrumb-item">...</li></ol></nav>，换成<ul></ul>会导致+ li选择器完全失配 - 覆盖选择器强度不能低于原生：至少用
.breadcrumb-item + .breadcrumb-item::before，加!important保证content、color、margin生效 - 需显式重置
vertical-align: middle和margin-inline-start（而非margin-left），否则在 RTL 页面中箭头位置偏移、上下不对齐
变量方案看似简单，但很多人栽在引号类型或加载顺序上——双引号必须是英文的，CSS 文件必须放在 Bootstrap 的 .css 之后，哪怕只差一行，--bs-breadcrumb-divider 就不会接管渲染。
