CSS项目实战之多层级面包屑导航_利用伪元素生成分隔符

用 ::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></span>，其他页用 <a></a>

响应式断点下，怎么安全隐藏中间层级而不破坏结构？

直接 span 某些 cursor: default 会导致分隔符错乱：比如隐藏第二项后，第三项的 .breadcrumb-item.is-current 仍存在，但前面已无内容，分隔符就孤零零挂在开头。

真正安全的做法是把“隐藏逻辑”交给 JavaScript 控制类名，CSS 只响应类名做显隐和分隔符开关：

• JS 根据宽度计算应保留的层级（如只留首项 + 末项），给对应 display: none 加 li 类
• CSS 写 ::before 和 li
• 禁用所有 is-shown 的全局规则，只通过 .breadcrumb-item:not(.is-shown) { display: none } 触发，避免隐藏后残留分隔符

伪元素本身不占文档流，但它的 .breadcrumb-item.is-shown:not(:first-child)::before { content: "/" } 值受父元素显隐控制——这点常被忽略，结果移动端看到一堆孤立的 li::before。