是语义化水平分隔符，非竖线解决方案；导航栏中“首页”“关于”“服务”间应使用nav ul li::after加竖线，或div配合color-scheme适配暗色模式，避免旋转导致布局错位与可访问性问题。
横向导航里加竖线分隔，别用 <hr>
<hr> 是语义化水平分隔符，浏览器默认渲染为横线，强行 transform: rotate(90deg) 会导致布局错位、可访问性下降、高DPI屏下模糊——它不是竖线的解决方案。
真正可控的做法是：用 <div> 或伪元素 + CSS 控制宽度/高度/颜色/对齐。常见错误包括：<ul>
<li>给 <code><hr> 加 rotate 后父容器高度塌陷
border-left 替代背景色，在缩放时出现 1.5px 模糊边display: inline-block，导致宽高无效Flex 导航项间自动插入等距竖线（推荐）
当导航项用 display: flex + flex: 1 等分宽度时，最干净的竖线方案是把分隔线画在 <nav></nav> 背景上，用 linear-gradient 重复绘制。
关键点在于计算单元宽度：calc((100% + var(--s)) / N)（N 是项数），让每条竖线精准落在相邻项正中央。例如三等分导航：
立即学习“前端免费学习笔记（深入）”；
nav {
--s: 2px;
background: linear-gradient(90deg, currentColor var(--s), transparent 0)
repeat-x calc(-1 * var(--s)) 50% / calc((100% + var(--s)) / 3) 40%;
}这样既不增加 DOM 节点，又天然响应式；currentColor 还能随文字颜色联动变色。
用伪元素加竖线，注意 vertical-align 和 margin
适合两个按钮、图标或短文本并排时加中间竖线，比如 <button>Home</button><button>About</button>。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
直接在容器上用 ::after 插入一条竖线更轻量，但必须显式设置：
-
display: inline-block（否则width/height不生效） -
vertical-align: middle（避免和文字底部对齐导致视觉偏高） -
margin: 0 8px（用margin而非padding，不撑开父容器）
示例：
.nav-group::after {
content: "";
width: 1px;
height: 1.2em;
background: #ccc;
margin: 0 8px;
display: inline-block;
vertical-align: middle;
}SVG 竖线只在需要抗锯齿或动态主题时才用
普通场景没必要上 SVG；但它在 Retina 屏、主题切换、动画需求下确实更稳——<svg></svg> 渲染的是矢量，不会模糊，颜色也能用 CSS 变量控制。
一个最小可用示例：
<svg width="1" height="24" viewBox="0 0 1 24"> <rect width="1" height="24" fill="currentColor"/> </svg>
注意：viewBox 保证缩放不失真；fill="currentColor" 让它跟随父元素文字颜色变化；如果嵌在行内，加 vertical-align: middle 对齐。
复杂点在于，所有方案都依赖父容器有明确高度或 display: flex 触发 BFC；如果竖线高度始终不对，先检查父级是否设置了 height 或 line-height，而不是直接调伪元素的 top/bottom。
