HTML中无原生垂直分隔线标签，<hr />仅语义化表示水平主题分隔；强行旋转会破坏布局与语义，推荐用<div>+CSS（如width:1px; height:24px; display:inline-block）或伪元素实现可控、语义清晰的竖线。
HTML里没有<hr>的垂直版本
原生HTML的<hr>只能水平渲染，强行用transform: rotate(90deg)会破坏文档流、影响布局定位，且语义错误——它本就不是用来做竖线的。
真正靠谱的做法是用CSS控制一个空元素，语义清晰、可控性强、兼容性好。
用<div> + CSS实现可靠竖线
推荐写法：<div class="divider-v"></div>，配合以下CSS：
div.divider-v {
width: 1px;
height: 24px; /* 可调 */
background-color: #ccc;
display: inline-block;
vertical-align: middle;
}关键点：
立即学习“前端免费学习笔记（深入）”；
-
display: inline-block让元素能和文字/行内元素并排，不换行 -
vertical-align: middle避免底部对齐导致视觉偏移 - 别用
border-left或border-right代替background-color——那样在缩放或高DPI屏下容易模糊或错位 - 若需响应式高度（比如随父容器等高），改用
height: 100%并确保父级有明确高度或display: flex
Flex布局中直接用伪元素更轻量
如果竖线只是分隔两个按钮或菜单项，不用额外DOM节点：
.btn-group::after {
content: "";
width: 1px;
height: 1.2em;
background: #ddd;
margin: 0 8px;
display: inline-block;
vertical-align: middle;
}注意：
- 伪元素默认是
inline，必须显式设display: inline-block才能设宽高 -
margin比padding更安全——不会撑开父容器 - 不要给伪元素设
position: absolute来“覆盖”布局，那会增加维护成本，且易被其他绝对定位元素干扰
SVG竖线适合需要抗锯齿或动态颜色的场景
比如主题切换时要同步变色，或需要精确1px抗锯齿（尤其在Mac Retina屏）：
<svg width="1" height="24" viewBox="0 0 1 24" xmlns="http://www.w3.org/2000/svg"> <rect width="1" height="24" fill="#999"/> </svg>
优势与限制：
- 缩放无损，
viewBox保证像素级精准 - 可直接用CSS控制
fill，支持currentColor继承文字色 - 别用
<line>——它在某些浏览器下可能渲染为0.5px宽，视觉发虚 - 嵌入HTML时建议用内联SVG，避免HTTP请求；如需复用，可抽成
<symbol>再<use>
实际项目里最容易出问题的是：把竖线当装饰强行塞进语义化标签（比如在<nav>里加<hr>旋转），结果导致无障碍阅读器误读、SEO权重稀释。竖线本质是视觉分隔符，不是内容，该用CSS就用CSS，该用SVG就用SVG，别硬凑HTML语义。
