面包屑分隔符不显示，主因是 Bootstrap 5 的 .breadcrumb-item + .breadcrumb-item::before 规则被覆盖或兄弟关系不成立；应提高 CSS 选择器权重、确保相邻 <li> 结构、检查开发者工具中伪元素是否被划掉；更换符号只需修改 content 值，图标需用 background-image 替代。
面包屑分隔符不显示？检查 ::before 是否被默认样式覆盖
Bootstrap 5 默认用 aria-label="breadcrumb" 的 <nav> 包裹 <ol class="breadcrumb">，其内部 <li> 之间**没有实际分隔字符**，而是靠 .breadcrumb-item + .breadcrumb-item::before 插入内容。如果你的自定义分隔符没出现，大概率是 Bootstrap 自带的 ::before 规则优先级更高或被重置了。
实操建议：
- 在你的 CSS 中显式覆盖 Bootstrap 的规则，用
!important不是必须，但加content值前确保选择器权重 ≥ Bootstrap 原生规则（如.breadcrumb-item + .breadcrumb-item::before） - 确认目标元素确实有相邻兄弟关系——
<li class="breadcrumb-item">后紧跟另一个<li>，中间不能有注释、空格文本节点或其它标签 - 检查浏览器开发者工具中该伪元素是否被“strike-through”，如果是，说明被更高优先级样式屏蔽
想用「/」以外的符号？直接改 content 值就行
Bootstrap 5 默认的分隔符是 /（斜杠），对应 CSS 是 content: "/"。换成箭头、点、竖线等，只需替换这个字符串值。
常见可选写法示例：
立即学习“前端免费学习笔记（深入）”；
.breadcrumb-item + .breadcrumb-item::before {
content: "›"; /* 右向箭头，较常用 */
}
<p>.breadcrumb-item + .breadcrumb-item::before {
content: "•"; /<em> 实心圆点，注意全角/半角影响间距 </em>/
}</p><p>.breadcrumb-item + .breadcrumb-item::before {
content: "|"; /<em> 竖线，需配合 padding 控制左右留白 </em>/
}注意：content 中的字符是纯文本，不支持 HTML 实体（如 >），但可直接用 Unicode 字符（如 ›）。若用图标字体（如 Font Awesome），得配合 font-family 和 Unicode 编码，不是简单填字符串。
图标或 SVG 作为分隔符？别用 content，改用背景图
::before 的 content 属性只能插入文本或计数器，无法嵌入 <svg> 或图片。强行用 url() 在 content 里会失效。
正确做法是放弃 content，转为用 background-image + padding-left 模拟分隔效果：
.breadcrumb-item + .breadcrumb-item::before {
content: ""; /* 清空默认内容 */
display: inline-block;
width: 16px;
height: 16px;
margin-right: 8px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%236c757d' d='M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
}要点：
- 必须设
content: ""，否则旧内容和背景图会叠加 - 用内联 SVG data URL 避免额外请求，注意 URL 编码（
/→%2F，#→%23等） -
display: inline-block让宽高生效；margin-right控制与后一项的距离，比靠padding-left更可控
响应式场景下分隔符错位？优先检查 white-space 和 flex 行为
Bootstrap 的 .breadcrumb 默认是 display: flex，而 ::before 是行内元素，在换行或缩放时容易和文字脱离对齐。常见表现是分隔符悬在上一行末尾、或与文字基线不齐。
解决方向：
- 给
.breadcrumb-item::before加vertical-align: middle或baseline，微调垂直位置 - 避免在分隔符上设固定
width或height，改用em或ex单位使其随字体缩放 - 如果用了背景图分隔符，确保
background-size: contain或cover，并配background-position: center - 小屏幕下考虑隐藏分隔符（用
@media (max-width: 576px)设content: none），改用上下排列或仅保留最后一级
真正麻烦的是多语言环境：阿拉伯语、希伯来语等 RTL 语言下，::before 会出现在左侧而非右侧，此时需要配合 [dir="rtl"] .breadcrumb-item + .breadcrumb-item::before 单独调整 content 或 transform: scaleX(-1) 翻转箭头。
