应使用 .breadcrumb-item + .breadcrumb-item::before 覆盖 Bootstrap 默认分隔符，通过 content 替换为箭头、竖线或图标，并确保样式在 Bootstrap CSS 后加载以保证优先级。
如何用 ::before 或 ::after 替换 .breadcrumb-item + .breadcrumb-item 的默认斜杠
Bootstrap 5 默认用 ::before 在非首个面包屑项前插入 /，但这个字符写死在 CSS 的 content 里，不能直接通过 HTML 修改。想换成箭头、竖线或图标？必须覆盖原生规则。
关键点在于：Bootstrap 的分隔符样式定义在 .breadcrumb-item + .breadcrumb-item 选择器下，且依赖 ::before 伪元素。你不能删掉它，只能用更高优先级的 CSS 覆盖 content 值。
- 务必把自定义样式放在 Bootstrap CSS 之后加载，否则会被覆盖
- 推荐使用
.breadcrumb-item + .breadcrumb-item::before精准定位，避免影响其他组件 - 如果要用图标（如 Font Awesome），确保字体已加载，并用 Unicode 或
url()引入 SVG；纯文本符号直接写进content
.breadcrumb-item + .breadcrumb-item::before {
content: "→"; /* 替换为箭头 */
padding: 0 0.5rem;
}
为什么直接改 content: "/" 不生效？常见优先级陷阱
最常见的失败原因是 CSS 优先级不够。Bootstrap 5 的原始规则是：
.breadcrumb-item + .breadcrumb-item::before {
content: "/";
padding: 0 0.5rem;
}
如果你只写 .breadcrumb-item::before { content: "›"; }，它不会生效——因为选择器权重太低，且没匹配到正确的兄弟关系。
- 错误写法：
.breadcrumb-item::before（没限定兄弟关系，会干扰第一个项） - 错误写法：
.breadcrumb::before（作用域错，伪元素不在这里） - 正确写法必须保留
.breadcrumb-item + .breadcrumb-item结构，再加::before - 若仍不生效，检查浏览器开发者工具中该规则是否被划掉；被划掉说明有更高优先级样式覆盖它
用 SVG 图标做分隔符时的尺寸与对齐问题
用 content: url("arrow.svg") 比纯文本更灵活，但 SVG 默认按内联元素渲染，容易上下偏移或撑高行高。
- 给伪元素显式设置
vertical-align: middle或top，避免基线对齐错位 - 加上
height和line-height匹配文字高度（如1em），否则可能压扁或留白异常 - SVG 文件需是无边距、无 viewBox 外扩的精简版本，否则渲染后边缘留空
- 更稳妥的做法：用
background-image替代content: url()，配合padding-left控制间距
.breadcrumb-item + .breadcrumb-item::before {
content: "";
background: url("chevron-right.svg") no-repeat center / 1em;
width: 1em;
height: 1em;
display: inline-block;
vertical-align: middle;
margin: 0 0.5rem;
}
响应式场景下分隔符要不要隐藏？
小屏幕（如手机）上，过多的分隔符会挤占空间，尤其当面包屑项多于 3 个时。Bootstrap 本身不自动隐藏分隔符，得手动处理。
- 不要用
display: none隐藏整个::before，否则会破坏兄弟选择器逻辑，导致后续项样式错乱 - 推荐用
content: ""清空内容，同时保留伪元素占位（避免重排） - 搭配
visibility: hidden更安全，既隐藏又不触发重排 - 若用 SVG 作为背景，可直接在媒体查询中设
background-image: none
@media (max-width: 576px) {
.breadcrumb-item + .breadcrumb-item::before {
content: "";
}
}
真正麻烦的是多语言环境下的分隔符语义——比如中文习惯用「»」或「/」，但 RTL 语言可能需要反向箭头；这种时候别硬塞在 CSS 里，考虑服务端或 JS 动态注入更可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
