hr 是最语义明确的水平分隔符，但因 CSS 重置常导致 border 消失；应统一在基础样式中设 border-top，禁用 height+background 模拟；带文字分隔须用 div+伪元素，hr 不允许嵌入内容。

hr 标签仍是最语义明确、开箱即用的水平分隔方案，但直接写

---

很可能被默认样式或重置 CSS 干扰，实际效果常和预期不一致。

为什么 hr 渲染出来不是一条线？

现代 CSS 重置库（如 Normalize.css 或 Tailwind 的 base styles）普遍会重设 hr 的默认边框和 margin。例如 Chrome 默认是 border: 1px inset，但某些框架会清成 border: none，导致“消失”。

• 检查 DevTools 中 hr 元素的 computed border-top 是否为 none 或 0px
• 确认父容器是否设置了 overflow: hidden 或 transform，可能裁剪掉细线
• 若页面用了 CSS-in-JS 或 Shadow DOM，hr 可能未继承全局样式

如何用 CSS 安全控制 hr 样式？

HTML5 已移除所有呈现属性（width、color、noshade 等），必须用 CSS。关键不是“怎么写”，而是“写在哪”——建议在全局基础样式中统一定义，避免局部覆盖冲突。

• 必须显式设置 border：仅靠 height 或 background 不可靠，hr 是替换元素，高度由边框撑开
• 推荐写法：hr { border: 0; border-top: 1px solid #e0e0e0; margin: 1.5rem 0; }
• 避免用 height + background 模拟，会导致可访问性问题（屏幕阅读器可能忽略无语义的 div）
• 若需响应式粗细，用 border-width: max(1px, 0.05em)，兼顾高 DPI 和缩放

hr 和 div + border-top 选哪个？

取决于语义需求：如果只是视觉分隔且上下文无主题切换，div class="divider" 更灵活；如果明确表示“段落间主题转换”（比如从介绍切换到操作指南），hr 不可替代。

• hr 被屏幕阅读器识别为“section break”，朗读时会提示“horizontal rule”
• div 方案需手动加 role="separator" 和 aria-hidden="true" 才能接近语义等效
• 性能上无差异，但混用易造成维护混乱——团队内应约定：语义分隔用 hr，装饰分隔用 div

带文字的分隔线能否用 hr 实现？

不能。HTML 规范禁止在 hr 内嵌内容（它是空元素），强行插入文字会导致验证失败，且部分旧版辅助技术会报错。

• 正确做法：用 div + 伪元素，如 .text-divider::before 和 ::after 绘制两侧线条
• 若必须保语义，可包裹结构：
  or
  ，再用 CSS 布局
• 注意：不要给 hr 加 content 伪元素，它不渲染文本节点，纯属无效 hack

真正容易被忽略的是语义与样式的耦合点：当你删掉一段内容时，hr 是否还合理存在？如果分隔线只服务于视觉节奏而非内容逻辑，它其实不该是 hr。