应使用::before，因其渲染顺序在文字之下、背景之上，更可控；需为.modal-header设position: relative，并用left:0;right:0;定义宽度，高度设为4px，深色模式下用[data-bs-theme="dark"]覆盖样式，避免影响动画性能。
模态框头部加装饰线，用 ::before 还是 ::after？
直接用 ::before。因为装饰线要盖在头部背景之上、文字之下，::before 渲染顺序更可控，且不会干扰 .modal-header 内部的 h5 或按钮布局。
常见错误是写成 ::after 后发现线被文字遮住，或者加了 z-index 却没给父元素设 position: relative，结果伪元素跑出容器外。
- 必须给
.modal-header加position: relative -
::before设content: ""、position: absolute、top: 0 - 宽度用
left: 0; right: 0;比width: 100%更稳，避免 box-sizing 影响
装饰线位置偏移、粗细不一致？检查 border-box 和 padding
Bootstrap 5 的 .modal-header 默认有 padding: 1rem 1rem 0，顶部 padding 为 0，但伪元素若从 top: 0 开始画线，会紧贴上边缘——看起来像“没对齐”，其实是被模态框的 border-radius 或阴影遮了一点。
真正影响视觉对齐的是父容器的 box-sizing 和子元素 margin。Bootstrap 默认用 box-sizing: border-box，所以伪元素尺寸计算是可靠的；但如果你手动改过 .modal-header 的 padding 或 font-size，线的位置就容易漂移。
- 装饰线高度建议用
height: 4px（别用border-top，不好控色和圆角） - 若要线略向下沉一点，改
top: 2px而不是调 margin - 避免在
.modal-header上设line-height或transform，会影响伪元素定位基准
怎么让装饰线适配深色主题（data-bs-theme="dark"）？
Bootstrap 5.3+ 支持 data-bs-theme="dark"，但伪元素样式不会自动切换——它不读取 CSS 自定义属性的暗色值，除非你显式监听。
最简方案是用 @media (prefers-color-scheme: dark) + :root 配合，但更可靠的是直接靠 [data-bs-theme="dark"] .modal-header::before 覆盖。注意：这个属性选择器必须写在默认样式之后，否则不生效。
- 深色模式下别用纯黑线（
#000），推荐rgba(255, 255, 255, 0.1) - 不要依赖
color-scheme: dark去触发伪元素变色，它只影响表单控件 - 如果用了 CSS 变量（如
--bs-primary），伪元素里不能直接用var(--bs-primary)做背景，得靠 JS 注入或预编译处理
为什么加了伪元素后模态框关闭动画卡顿？
因为 ::before 默认触发重排（reflow），尤其当它带 transform 或 filter 时。Bootstrap 的 fade 动画本身基于 opacity 和 transform，叠加一个未优化的伪元素，GPU 合成层可能分裂，导致掉帧。
关键不是“能不能加”，而是“怎么加才不拖慢”。实测发现，只要伪元素不参与 transform 动画链，就不会卡。
- 给
.modal-header::before加will-change: transform是错的——它根本不动 - 正确做法：确保它只有
background-color和height，不设transition - 如果用了
box-shadow模拟立体感，换成linear-gradient背景，性能更好
position: absolute 基准，永远取决于最近的 position: relative 祖先——而 Bootstrap 某些版本里，.modal-content 才是那个祖先，不是 .modal-header。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
