面包屑分隔符不显示需覆盖Bootstrap默认样式：v5用.breadcrumb-item + .breadcrumb-item::before{content:"/"}，v4用:not(:first-child)；SVG需URL编码；伪元素优于手动插入以保语义与响应式。
面包屑分隔符不显示？检查 ::before 是否被 Bootstrap 默认样式覆盖
Bootstrap（v5.x）默认用 ~ 作为分隔符，但它是通过 content: "»" 写死在 .breadcrumb-item + .breadcrumb-item::before 里的。直接加自己的 ::before 会被它盖住——因为它的选择器权重更高、且声明在后。必须用相同或更高权重覆盖它，比如加上 !important 或提升选择器 specificity。
如何用 ::before 替换为斜杠 / 或图标
最稳妥的方式是复写 Bootstrap 的原始规则，确保生效：
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
padding: 0 0.5rem;
color: #6c757d;
}如果要用 SVG 图标，可以改用 base64 或 data URL：
.breadcrumb-item + .breadcrumb-item::before {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M8.59 16.34l4.58-4.59-4.58-4.59L10 6l6 6-6 6z'/%3E%3C/svg%3E");
padding: 0 0.25rem;
}- 注意：URL 中的
/、#、等字符必须 URL 编码，否则解析失败 - 不要用
background-image配合content: ""，那样会多占一个伪元素位置，导致间距错乱 - 若项目用了 CSS-in-JS（如 styled-components），需确保该样式注入顺序在 Bootstrap 之后
为什么用 ::before 而不是直接在 HTML 里写分隔符
手动插入分隔符（比如 <span class="separator">/</span>）看似简单，但会破坏语义结构和可访问性：
立即学习“前端免费学习笔记（深入）”；
- 屏幕阅读器可能把分隔符读成独立内容，干扰导航逻辑
- 移动端缩放时，硬编码字符易与文字重叠，而伪元素可随字体缩放自动对齐
- SEO 不关心分隔符，但语义清晰的
<ol class="breadcrumb"></ol>更利于结构化数据识别 - 维护成本高：每增删一项都要同步改分隔符，而伪元素全自动
兼容旧版 Bootstrap 4 的写法差异
Bootstrap 4 把分隔符写在 .breadcrumb-item:not(:first-child)::before，且默认用 > 符号。若要统一替换，得分别处理：
/* Bootstrap 4 */
.breadcrumb-item:not(:first-child)::before {
content: "/";
padding: 0 0.5rem;
}
<p>/<em> Bootstrap 5 </em>/
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
padding: 0 0.5rem;
}混用多个版本时，建议用 data-bs-version 属性做隔离，避免样式冲突。
真正麻烦的是响应式断点下的隐藏逻辑：当 .breadcrumb-item 被 display: none 时，其后的 ::before 也会消失，但前一项的伪元素还在——这会导致末尾多出一个孤立分隔符。得配合 @media 手动清空，或者改用 JS 动态控制，这点容易被忽略。
