伪元素 height: 100% 不起作用是因为父容器无显式高度，导致百分比解析为0；应改用 top: 0; bottom: 0 配合 position: relative 实现垂直贯穿线。
伪元素 height: 100% 为什么不起作用？
直接给 ::before 或 ::after 设置 height: 100%，通常啥也看不到——因为伪元素的父容器没有显式高度，而 height: 100% 是相对于父元素计算的。评论区常见结构是浮动或 flex 布局的 .comment-item，其高度由内容撑开，但未设置 height 或 min-height，导致伪元素的 100% 解析为 0px。
解决思路不是“强行设高”，而是让伪元素能感知到内容区域的真实高度范围。常见做法是把伪元素定位在楼层编号（如 .floor-num）上，并用绝对定位 + top/bottom 拉伸。
- 确保父容器（如
.comment-item）启用position: relative - 把楼层引导线做在
.floor-num::before上，而非整个评论项的伪元素 - 避免对
display: inline元素使用height: 100%（它只对块级/替换元素生效）
用绝对定位 + top/bottom 实现垂直贯穿线
这是最稳定、兼容性最好的方案：不依赖 height: 100%，改用 top: 0; bottom: 0 让伪元素从父容器顶部拉到底部。
.floor-num {
position: relative;
display: inline-block;
}
.floor-num::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 1px;
background-color: #e0e0e0;
transform: translateX(-50%);
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
top: 0; bottom: 0要求父元素有明确的定位上下文（position: relative已满足） -
left: 50%+transform: translateX(-50%)居中细线，比left: 50%; margin-left: -0.5px更安全（避免小数像素偏移） - 若评论项之间有间距（
margin-bottom），引导线默认不会延伸到间隙里——这反而是合理行为；如需连通，应把引导线提升到包裹所有评论的容器上
多层嵌套评论中如何保持引导线连续？
当存在 .comment-item > .reply-list > .comment-item 这类嵌套时，单靠每个 .floor-num 的伪元素会断开。此时不能依赖子项自身高度，而要让引导线“穿透”层级。
推荐做法：把引导线统一画在最外层容器（如 .comment-thread）上，用 CSS 变量或 JS 动态控制起始/结束位置——但纯 CSS 下更可行的是利用 border-left 配合 padding-left 模拟主轴线，再用伪元素画楼层标记点。
- 主引导线用
.comment-thread { border-left: 1px solid #eee; padding-left: 24px; } - 每个
.floor-num改为绝对定位的小圆点（width/height: 6px），left: -12px对齐主线 - 避免在
flex容器内对伪元素设height: 100%，flex 项的交叉轴尺寸不触发百分比解析
IE 和旧版 Safari 下的 fallback 注意点
transform: translateX(-50%) 在 IE9+ 和 Safari 6.1+ 支持良好，但若需兼容更低版本，可改用 margin-left: -0.5px（前提是线宽固定为 1px）。
另外，bottom: 0 在某些 flex 布局下可能失效（尤其父容器设了 align-items: flex-start），此时应确保父容器的 height 可被继承，或改用 inset: 0（仅支持现代浏览器）。
- 不要依赖
height: 100vh或100%在 flex 子项中撑高伪元素 - 调试时可用
outline: 1px solid red临时查看伪元素实际渲染区域 - 移动端需注意
1px线在高清屏上发虚，建议用transform: scaleY(0.5)配合origin控制缩放基点
真正卡住的往往不是“怎么画一条线”，而是没想清楚这条线该附着在哪一层、谁负责提供高度上下文。多数情况下，放弃 height: 100%，拥抱 top/bottom 或 border + padding 组合，反而更快落地。
