响应式分割线应避免固定间距类，需用断点前缀控制间距或显隐；border-top更适配布局需求；伪元素需绝对定位垂直居中；divide-y须显式加断点前缀；语义上优先保留<hr>。
直接用 <hr> 最省事，但真要响应式，得靠间距类或显示控制，而不是改线本身。
为什么 <hr> 不能只写 class="my-4"
因为 my-4 在所有断点下都生效，小屏上留白过大、视觉断裂。它不“响应”，只是固定留白。真正响应式是让间距或显隐随视口变化：
- 用断点前缀组合：比如
class="my-2 my-md-4 my-lg-5"—— 小屏紧凑，中大屏拉开 - 用显示类隐藏：比如
class="d-none d-md-block"—— 超小屏不显示，仅在平板及以上出现 - 别给
<hr>加height或width行内样式，会破坏流式布局
什么时候该用 border-top 替代 <hr>
当分割线要精确贴合内容边界（比如卡片底部）、或需避免 margin 合并、或在 Flex/Grid 中保持布局稳定时，border-top 更可控：
- 卡片列表最后一项不加线：用相邻兄弟选择器
.card + .card { border-top: 1px solid #e9ecef; } - 移动端取消：加媒体查询
@media (max-width: 768px) { .card + .card { border-top: none; } } - 千万别对
<hr>再套border-top，会导致双线
用 ::after 插入文字间分割线，为什么总对不齐？
因为 ::after 默认是行内元素，不参与文本垂直对齐。常见表现是线飘在文字上方或盖住字：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative -
::after用position: absolute; top: 50%; transform: translateY(-50%)垂直居中 - 如果父元素是
display: flex，::after会失效——伪元素不继承 flex 上下文 -
content: ""必须写，不写就完全不渲染；别写content: " "（空格），会占位干扰对齐
Tailwind 用户注意 divide-y 的响应式写法
divide-y 是针对子元素间边框的快捷方案，但它本身不自动响应，必须显式加断点前缀：
- 错误写法：
class="divide-y divide-dashed"—— 所有尺寸都用虚线 - 正确写法：
class="divide-y divide-dashed md:divide-solid"—— 小屏虚线，中屏起实线 - 若想某断点下完全无分割线：
md:divide-y-0或md:divide-none - 注意：IE11 不支持
d-*-none和divide-*类，需回退到hidden或自定义媒体查询
最易被忽略的是性能与语义：大量 <hr> 在滚动区域（如长列表）里可能触发重排；而用 div + border 或伪元素虽灵活，却失去 <hr> 的语义和读屏器识别能力。选哪种，得看这根线到底是不是“内容分隔”——还是仅仅“视觉装饰”。
