伪元素加边框失效主因是未脱离文档流或未设置content和定位；须用position: absolute+content: ""，父容器配position: relative，并注意高清屏缩放适配。
伪元素加边框会失效？先确认是否触发了 BFC 或定位
直接用 ::before 或 ::after 模拟“扩展边框”时，最常见问题是元素没显示出来——不是写法错，而是父容器没给它留空间或没脱离文档流。伪元素默认是 inline 级，不占布局空间，也不响应 width/height。必须显式设置 content: ""、position: absolute（或 relative 配合 top/left 偏移），否则边框类效果根本出不来。
实操建议：
- 父元素记得加
position: relative，否则absolute伪元素会相对于 viewport 定位 - 避免在
display: inline元素（如<span></span>）上直接叠加伪元素边框，容易错位；优先选block或inline-block - 若需响应式扩展（比如 hover 时边框往外延展），用
transform: scale()比改width/height更稳定，不触发重排
用 ::after 模拟双层边框：外扩 2px 的真实做法
所谓“扩展装饰边框”，本质是让视觉边框比原生 border 更宽、带渐变/阴影/纹理等。纯 CSS 实现最可靠的方式是用 ::after 绘制一层略大的背景框，再用父元素的 border 做内层线。
.decorated {
position: relative;
border: 2px solid #333;
}
.decorated::after {
content: "";
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border: 2px solid #ff6b6b;
pointer-events: none;
}
注意：top/left/right/bottom 各设为 -4px 是为了让伪元素比原元素大 8px（上下+左右），这样外层边框就“扩展”出来了。数值要根据实际需要调整，且必须配合 position: absolute 和 content: ""，缺一不可。
立即学习“前端免费学习笔记（深入）”；
box-shadow 能替代吗？和伪元素比有什么坑
用 box-shadow: 0 0 0 4px #ff6b6b 确实能快速模拟外扩边框，但它不是真正的边框元素，无法做剪切、渐变边框、镂空或鼠标穿透控制。比如你想让扩展部分带径向渐变，或者 hover 时只对扩展区加动画，box-shadow 就无能为力。
关键差异：
-
box-shadow不占布局空间，不影响兄弟元素位置；伪元素可以参与定位、甚至用z-index分层 -
box-shadow在高缩放（如 Windows 缩放 125%）下易出现模糊或断点；伪元素边框始终是硬边 - 伪元素支持
background: linear-gradient()做装饰性边框，box-shadow只能是单色或模糊光晕
移动端适配时伪元素边框突然变细？检查 device-pixel-ratio 和缩放
在 iOS Safari 或某些 Android 浏览器中，1px 的伪元素边框可能被渲染成物理 0.5px，看起来发虚。这不是 bug，是高清屏下的正常行为，但会让“扩展边框”的视觉权重失衡。
解决办法不是强行写 2px，而是用媒体查询按设备像素比修正：
@media (-webkit-min-device-pixel-ratio: 2) {
.decorated::after {
transform: scaleY(0.5);
}
}
更稳妥的做法是统一用 transform: scale(0.5) 配合 transform-origin 居中缩放，而不是改边框粗细——否则在非 retina 设备上又会过粗。
真正难处理的是混合缩放场景：比如用户手动放大网页到 150%，此时伪元素的 px 值仍按原始尺寸计算，容易错位。这时候得放弃绝对像素，改用 rem 或 vw 做基准，再配合 JS 动态监听 window.visualViewport.scale 微调。
