用 ::before 更稳妥，因其插在非首项左侧，语义清晰且避免末项多出分隔符；需配合 line-height 继承和 vertical-align: middle 对齐基线；结构上用 span 区分当前页，响应式通过 is-shown 类控制显隐与分隔符。
面包屑分隔符用 ::before 还是 ::after？
用 ::before 更稳妥。因为分隔符要插在每个非首项的前面，逻辑上是“当前项左侧该有个符号”，而不是“上一项右侧补一个”——后者在 DOM 移动或动态插入时容易错位。
常见错误是写成 li::after + content: ">"，结果最后一项也多出一个分隔符，还得额外用 :last-child::after { display: none } 补救，反而增加维护负担。
- 统一用
li:not(:first-child)::before控制，语义清晰，无须排除 - 若用
li::after，必须配:last-child::after { content: none }，否则 SSR 或 JS 动态渲染时易漏掉 -
::before在行内布局中更易对齐：它紧贴文字左侧，不受margin-right干扰
CSS 伪元素分隔符如何对齐文字基线？
默认 ::before 是 display: inline，但字体、字号、行高不一致时，分隔符会“飘”在文字上方或下沉，尤其和图标混用时明显。
关键不是调 vertical-align，而是让伪元素和文字共用同一套排版上下文：
立即学习“前端免费学习笔记（深入）”；
- 给
li设line-height: 1.5（或具体数值），并确保li::before继承它 -
li::before加vertical-align: middle或baseline，推荐middle—— 它基于父容器的line-height中心对齐，比baseline更稳定 - 避免用
font-size: 0.8em直接缩放分隔符：不同字体的 x-height 差异大，缩放后仍可能错位
多层级面包屑里，怎么让中间项可点击但末项不可点击？
靠 CSS 无法区分“是否为当前页”，必须靠 HTML 结构配合。最简方案是：当前页用 <span>，其他页用 <a>，再用 CSS 统一视觉样式。
别试图用 :last-child a { pointer-events: none; color: #666 } —— 一旦面包屑被 JS 重绘或服务端注入新节点，:last-child 就失效了。
- HTML 结构示例：
<li><a href="/home">首页</a></li><li><a href="/list">列表</a></li><li><span>详情</span></li> - CSS 中统一设置
a, span { color: #333; text-decoration: none; }，再单独给span加cursor: default - 如果必须用 class 区分（如 CMS 输出限制），用
.breadcrumb-item.is-current比依赖位置选择器可靠得多
响应式断点下，怎么安全隐藏中间层级而不破坏结构？
直接 display: none 某些 li 会导致分隔符错乱：比如隐藏第二项后，第三项的 ::before 仍存在，但前面已无内容，分隔符就孤零零挂在开头。
真正安全的做法是把“隐藏逻辑”交给 JavaScript 控制类名，CSS 只响应类名做显隐和分隔符开关：
- JS 根据宽度计算应保留的层级（如只留首项 + 末项），给对应
li加is-shown类 - CSS 写
.breadcrumb-item:not(.is-shown) { display: none }和.breadcrumb-item.is-shown:not(:first-child)::before { content: "/" } - 禁用所有
li::before的全局规则，只通过.is-shown触发，避免隐藏后残留分隔符
伪元素本身不占文档流，但它的 content 值受父元素显隐控制——这点常被忽略，结果移动端看到一堆孤立的 /。
