伪元素在.form-group上不显示垂直线，根本原因是其默认display: inline且父容器缺position: relative；须设display: block、position: absolute并配合top/bottom: 0撑满高度。
为什么 ::before 或 ::after 在 .form-group 上不显示垂直线
直接给 Bootstrap 的 .form-group 添加 ::before 伪元素常没反应，根本原因是：默认情况下伪元素是内联级（display: inline），而垂直线需要占据高度、有宽度、且需脱离文本流定位。更关键的是，Bootstrap 4/5 的 .form-group 通常没有设置 position: relative，导致 absolute 定位的伪元素找不到参照物，直接脱出容器外或压根不可见。
实操建议：
- 必须给
.form-group显式添加position: relative - 伪元素设为
display: block，并指定width和height - 用
top/bottom+left控制垂直线起止位置和偏移量 - 避免用
content: ""以外的值——空字符串是伪元素渲染的前提
如何让垂直线从表单组顶部贯穿到底部
要实现“通高”垂直线，不能依赖父容器固定高度（表单内容高度可变），得用绝对定位撑满。关键是把伪元素的 top 和 bottom 都设为 0，再配合 left 或 right 定位到期望侧边。
示例（右侧加垂直线）：
.form-group {
position: relative;
}
.form-group::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -16px; /* 留出间距，避免贴边 */
width: 1px;
background-color: #dee2e6;
}
注意点：
-
right: -16px中的负值是向外偏移，若想线在组内右侧边缘，改用right: 0并调整padding-right - Bootstrap 5 默认用
flex布局，若.form-group内含.row或.col，需确认伪元素不会被 flex 子项的z-index或overflow遮挡 - 垂直线颜色建议复用 Bootstrap 的边框色变量，如
var(--bs-border-color)
多个表单组之间共用一条垂直线怎么处理
如果想让一组相邻的 .form-group 共享同一条垂直线（比如左右两列表单项中间那条分隔线），就不能每个组都画自己的线——容易错位、重叠或留白不均。更好的做法是：选中这组的共同父容器（例如 .row 或自定义 wrapper），在其上绘制单条线。
实操建议：
- 给父容器加
position: relative - 伪元素
left: 50%+transform: translateX(-50%)居中，避免因父容器 padding 导致偏移 - 若父容器有
padding，用calc()动态修正，例如left: calc(50% + 1rem) - 高度仍用
top: 0; bottom: 0，但需确保父容器有明确高度（或靠子项撑开）
响应式下垂直线消失或错位怎么办
常见于小屏幕折叠后，垂直线还在原位置“悬空”，或因 flex-wrap 导致父容器高度塌陷。本质是伪元素依赖的布局上下文在断点后变了。
解决路径：
- 在
@media查询中关闭不需要的垂直线：.form-group::after { display: none; } - 若保留，改用
min-height: 100vh或height: fit-content防塌陷（慎用100vh，可能引发 iOS Safari 滚动问题） - 避免对
.col直接加伪元素——Bootstrap 的栅格类本身无position，且在不同断点下display可能变block/flex，优先包裹一层自定义容器 - 调试时临时加
border: 1px solid red到父容器，确认伪元素是否真在预期位置渲染
真正麻烦的不是画线，而是线的位置和高度始终跟着内容走——一旦表单动态增减字段、异步加载或校验提示展开，就得靠 resize 监听或 ResizeObserver 补位，纯 CSS 很难兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
