应使用 .breadcrumb-item + .breadcrumb-item::before 覆盖 Bootstrap 4 分隔符，通过 content 替换为箭头或短横线等符号，显式重置 margin 或 padding，并加 !important 确保优先级，且自定义 CSS 必须在 Bootstrap CSS 之后加载。
如何用CSS覆盖 breadcrumb-item 的分隔符伪元素
Bootstrap 4 的面包屑分隔符是通过 ::before 伪元素在 .breadcrumb-item + .breadcrumb-item::before 中插入的，不是真实 DOM 节点，不能用 HTML 替换或 JS 删除。必须用 CSS 覆盖其 content、color 和 margin 等属性。
关键点：Bootstrap 4 默认使用 font-family: "Font Awesome 5 Free"（如果引入了 FA）或 Unicode 字符 "/"；但实际渲染取决于你是否加载了图标字体。若未加载 FA，它会回退到斜杠，此时直接覆盖 content 最稳妥。
- 务必把自定义样式放在 Bootstrap CSS 之后（或提高优先级）
- 不要只改
content，还要重置margin，否则间距可能异常 - 若用 SVG 或背景图替代，需设
display: inline-block并控制尺寸
替换为短横线（-）或箭头（→）的写法
最轻量、兼容性最好的方式是纯字符替换。注意用 !important 是因为 Bootstrap 的选择器权重较高（.breadcrumb-item + .breadcrumb-item::before 是 0-2-1）。
.breadcrumb-item + .breadcrumb-item::before {
content: "–" !important; /* en dash，比连字符更美观 */
padding: 0 0.5rem;
color: #6c757d;
}
<p>/<em> 或用右箭头 </em>/
.breadcrumb-item + .breadcrumb-item::before {
content: "→" !important;
padding: 0 0.3rem;
}</p>
不推荐用 >（HTML 实体），它在 CSS content 中无效；必须用 Unicode 字符或转义（如 92）。
用本地 SVG 替代图标时的关键约束
如果设计要求用 SVG 图标（比如一个细线条箭头），不能直接往 ::before 里塞 SVG 标签，只能用 background-image。此时必须显式设置宽高和 display，否则伪元素默认为 inline 且无尺寸，SVG 不会显示。
- 必须设
display: inline-block或block - 必须设
width和height（例如0.8em），不能依赖内容撑开 - 推荐用
background-size: contain和background-repeat: no-repeat - 记得重置
content: ""，否则文字和背景会叠加
.breadcrumb-item + .breadcrumb-item::before {
content: "" !important;
display: inline-block;
width: 0.8em;
height: 0.8em;
margin: 0 0.4rem;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l6 5-6 5' stroke='%236c757d' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
为什么 !important 很难绕开
Bootstrap 4 的原始规则是：.breadcrumb-item + .breadcrumb-item::before，权重为 0-2-1；而你写 .breadcrumb::before 或 .breadcrumb-item::before 都无法匹配到那个相邻兄弟选择器，所以必须复刻完整选择器。一旦复刻，就和原生权重一致，此时浏览器按 CSS 加载顺序决定胜负——除非加 !important，否则后加载的样式仍可能被同权重的后续规则覆盖（比如某些主题 CSS 也做了类似覆盖）。
真正容易被忽略的是：如果你用了 Sass 编译 Bootstrap，并试图在 $breadcrumb-divider 变量里改，那仅对未编译的源码生效；已构建的 bootstrap.min.css 里该字符串是硬编码的，变量修改无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
