因为::before默认inline且基线对齐，易致符号下沉或挤文字；应改用:not(:first-child)::before绝对定位+currentcolor适配主题，并响应式置空content。

为什么直接用 ::before 画分隔符容易错位或重叠

因为 ::before 默认是 inline 元素，不设置 display 或 vertical-align 时，会和文字基线对齐，导致符号下沉、和文字挤在一起。尤其在字体不一致或行高变化的导航中，/ 或 > 常常看起来“挂”在文字下方，而不是居中对齐。

实操建议：

• 给每个导航项的 a 或 li 设置 position: relative，再让 ::before 绝对定位，避免影响文档流
• 统一用 content: "/"（或 "\003E" 表示 >），不要用图片或 Unicode 混搭，否则字体回退时符号可能消失
• 加 font-variant-numeric: tabular-nums 防止斜杠在等宽/比例字体下宽度突变

如何只给中间项添加分隔符，避开首尾

面包屑第一项不需要前缀符号，最后一项后面也不该多一个 /。靠 :not(:first-child) 最直接，但要注意选择器作用对象——必须选中「有前驱兄弟」的导航项本身，而不是它的子元素。

实操建议：

• 结构用 <nav aria-label="Breadcrumb"><ol> <li>@#@#@#@#@#@#@#@#@#@0</li> <li>@#@#@#@#@#@#@#@#@#@1</li> </ol></nav>，然后写：

  ol li:not(:first-child)::before { content: "/"; margin: 0 0.5em; }

• 如果用 flex 布局，:not(:first-child) 依然生效，但需额外加 white-space: nowrap 防止符号被折行
• 避免用 li + li::before：当 li 之间有空格或换行文本节点时，相邻兄弟选择器会失效

响应式断点下怎么隐藏分隔符又不破坏结构

小屏时分隔符占空间、易拥挤，但不能删 DOM 或用 display: none 简单隐藏——那会让屏幕阅读器也跳过符号，影响可访问性。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

实操建议：

• 用 visibility: hidden + width: 0 + overflow: hidden 组合，视觉隐藏但保留语义位置
• 更稳妥的是改 content 为空字符串：

  @media (max-width: 480px) { ol li:not(:first-child)::before { content: ""; } }

• 若用 SVG 图标作分隔符（比如箭头），记得加 aria-hidden="true" 并确保 focusable="false"，否则键盘导航可能卡在符号上

::before 分隔符在高对比度模式或暗色主题下失效怎么办

系统级高对比度模式（Windows HC / macOS Dark Mode）会强制覆盖部分 CSS，比如忽略 color 或 background，但 content 和 font-family 一般保留。问题常出在符号颜色硬编码成 #999，结果在深色背景上看不见。

实操建议：

• 分隔符颜色始终用 currentColor，让它跟随文字色自动适配主题
• 避免给 ::before 单独设 font-size，优先继承父级；如需微调，用 em 或 rem，别用 px
• 测试时打开浏览器的「强制颜色」开关（Chrome DevTools → Rendering → Emulate CSS media feature prefers-contrast），看符号是否仍可读

最麻烦的其实是字体连字（ligature）干扰，比如某些字体把 / 渲染成斜线+阴影，或者和前后字母粘连。真遇到这情况，不如换用 \2044（FRACTION SLASH）或 SVG 内联，但那就不是纯 ::before 能解决的了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！