导航按钮间用|字符有可访问性风险，屏幕阅读器会读出“竖线”，键盘焦点可能误聚焦；语义不符且易破坏布局；伪元素::after最可控，配合:not(:last-child)和white-space: nowrap可确保健壮性。
导航按钮间用 | 字符最简单但有可访问性风险
直接在 HTML 里写 ，再配 text-align: center，确实最快。但它把分隔符当成了内容，屏幕阅读器会读出“首页 竖线 关于 竖线……”，语义混乱；键盘焦点跳转时也会把 | 当成可聚焦元素（尤其用了 包裹时）。这不是分割线，是偷懒的文本拼接。
里做按钮间竖线，会破坏行内流布局，导致换行、高度错位、对齐失效。即使加 display: inline-block 和负 margin 补救，也极易在不同字体或缩放下崩坏——它本就不是为这个场景设计的。
用伪元素 ::after 加竖线最可控
给每个导航项（比如 或 ）加 ::after，生成竖线并控制间距和颜色：
nav a:not(:last-child)::after {
content: "|";
margin: 0 12px;
color: #999;
}
关键点：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 必须用
:not(:last-child)排除最后一个，否则末尾多一根线 -
margin控制左右间距，比用 padding 更安全（不撑宽按钮本身） - 若需响应式隐藏竖线（如移动端），直接设
content: ""即可 - 避免用
border-right：按钮高度不一致时，竖线底部会露空或错位
纯 CSS 分割线要防文字换行截断
如果导航项文字较长或容器窄，::after 的 | 可能被挤到下一行。解决方法：
- 给导航容器加
white-space: nowrap强制单行（适合短导航） - 改用
border-right+padding-right组合，但只对固定高按钮有效 - 终极方案：用
background-image: linear-gradient(...)在按钮右侧画一条细竖线，完全脱离文本流，但兼容性略低（IE 不支持）
真正难的不是画那根线，而是让线在所有设备、所有字号、所有缩放比例下都稳稳待在该在的位置——这时候你会发现，字符分隔太脆，
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
