伪元素分隔符必须用 ::before/::after 生成而非 HTML 硬编码，以保障可访问性、高对比度兼容、响应式适配及语义正确；需用 currentColor、relative 定位、transform 居中，并按场景区分首末项逻辑。
伪元素分隔符为什么不能直接写在 HTML 里
硬编码 / 或 > 在 内部，会导致翻译时无法局部替换、高对比度模式下符号消失、缩放后错位，还破坏语义完整性。屏幕阅读器会把整个字符串读成一段话，而不是可导航的层级路径。
必须用 ::before 或 ::after 生成，靠 CSS 控制样式和位置，才能保证可访问性与主题适配。
- 分隔符只加在非首项前：用
li:not(:first-child)::before - 颜色要用
currentColor，别写死#999，否则换主题就断层 - 避免用
margin-left推，老 IE 不支持gap，但margin在 flex 容器里可能被压缩
横向导航栏中用伪元素做分隔线的写法
常见错误是给每个 加右边框，再用 :last-child 去掉最后一根——这在响应式切换为垂直布局时容易漏掉清理，导致小屏仍有竖线残留。
更稳的做法是让伪元素“画”在文字右侧，不依赖 border，也不污染结构：
- 给
li设position: relative - 用
li:not(:last-child)::after在右侧生成竖线 -
content: ""+position: absolute+right: 0+top: 50%+transform: translateY(-50%)居中对齐 - 宽度设
1px，高度设1.2em，比固定像素更适应字体缩放
示例片段：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
nav li {
position: relative;
}
nav li:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 1px;
height: 1.2em;
background-color: currentColor;
opacity: 0.6;
}
hover 状态下伪元素动画容易卡顿的原因
直接对 ::before 或 ::after 的 width 或 opacity 做 transition，在低端设备或 iOS Safari 上可能触发重排（reflow），尤其当父容器有 overflow: hidden 或 transform 时。
- 优先用
transform: scaleX(0)→scaleX(1)替代width: 0→width: 100% - 避免在伪元素上设
border或box-shadow同时过渡，它们开销大 - 加
will-change: transform只在 hover 时生效，别写在默认状态里 - 如果用
transition: all .3s，记得显式重置未参与动画的属性，比如transition: transform .3s, opacity .3s
面包屑里伪元素分隔符的特殊处理
面包屑（white-space: nowrap 强撑。
这时伪元素不只是装饰，还承担逻辑控制：
- 用
li:not(:first-child)::before而不是:not(:last-child)，因为首项是起点，末项是当前页，中间才需要分隔 - 小屏下用
@media (max-width: 768px)隐藏中间项的伪元素：li:not(:first-child):not(:last-child)::before { display: none; } - 当前页节点带
aria-current="page"，它的伪元素必须禁用，否则会多出一个无意义分隔符
最易忽略的一点：伪元素默认是 inline 级，若父 是 display: flex，需显式设 align-self: center 才能垂直居中，否则在字体行高变化时偏移。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
