最稳妥方案是用 .breadcrumb-item + .breadcrumb-item::before 注入箭头字符或 SVG，避免语义污染、兼容所有 Bootstrap 版本，并需注意 RTL 翻转、vertical-align: middle 对齐及小屏 display: none 彻底隐藏。
用 ::before 或 ::after 伪元素加箭头字符最稳妥
Bootstrap 默认的面包屑（.breadcrumb）用空格或斜杠分隔，但想换箭头（比如 > 或 ›），直接改 HTML 结构会破坏语义和可访问性。推荐用 CSS 伪元素注入，不侵入 DOM，且兼容所有 Bootstrap 版本（v4/v5）。
关键点：必须给 .breadcrumb-item + .breadcrumb-item 设置 ::before，否则首项也会多出箭头。
/* Bootstrap 5 示例 */
.breadcrumb-item + .breadcrumb-item::before {
content: "›";
padding: 0 0.5rem;
color: #6c757d;
}-
content里用 Unicode 字符（如"›"、">"、"→"）比 SVG 更轻量，渲染稳定 - 别用
.breadcrumb-item::after—— 容易和右对齐/RTL 场景冲突 - 如果项目用了 RTL（如阿拉伯语），需额外加
[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { content: "‹"; }
用 background-image 替代字符时要注意尺寸和居中
当设计要求箭头是图标（如 SVG 箭头）、需要精确控制大小或颜色时，background-image 是更可控的选择，但容易因盒模型错位导致箭头偏移。
.breadcrumb-item + .breadcrumb-item::before {
content: "";
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 1l3 3-3 3' stroke='%236c757d' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
width: 0.75rem;
height: 0.75rem;
margin: 0 0.5rem;
display: inline-block;
vertical-align: middle;
}-
vertical-align: middle必须加，否则 SVG 会和文字基线不对齐 - 用内联 SVG base64 编码，避免额外 HTTP 请求；注意 URL 中特殊字符要编码（如
#→%23） - 别设
font-size或line-height在伪元素上——它不继承字体，只响应width/height
Bootstrap 5 的 .breadcrumb-divider 类不能直接复用
Bootstrap 5 提供了 .breadcrumb-divider 工具类，但它只对 <div> 内嵌的分隔符生效（比如 <div class="breadcrumb-divider">›</div>），不是通过 CSS 注入，也不作用于 .breadcrumb-item 之间的间隙。硬套这个类到伪元素上无效。
立即学习“前端免费学习笔记（深入）”；
- 试图写
.breadcrumb-item + .breadcrumb-item::before { @apply breadcrumb-divider; }（在 Tailwind 或 Sass 中）会失败——它没定义伪元素样式 - 该类本质是预设的内联分隔符容器，语义和结构耦合强，不适合用于纯 CSS 分隔场景
- 若已用
.breadcrumb-divider，记得删掉对应 HTML 元素，否则和伪元素叠加出现双箭头
响应式下隐藏箭头需用 display: none 而非 content: ""
小屏设备（如手机）常要求去掉分隔符节省空间。此时仅设 content: "" 不够——伪元素仍占文档流位置，可能影响间距。必须用 display: none 彻底移除。
@media (max-width: 576px) {
.breadcrumb-item + .breadcrumb-item::before {
display: none;
}
}-
visibility: hidden不行——它还占位，左右padding依然存在 - 不要只隐藏最后一个箭头（比如用
:last-child），移动端通常全屏折叠，所有分隔符都应消失 - 如果用了 background SVG，同样要
display: none，光清空content不起作用
实际项目里最容易被忽略的是 RTL 场景下的方向翻转，以及伪元素未设 vertical-align 导致的垂直错位——这两处一出问题，箭头就飘在文字上方或下沉，看着像 bug 而不是样式。
