伪元素边框盖住内容或点不中按钮的根本原因是层叠顺序未控制好，需为伪元素设z-index:-1并确保父容器有position:relative，同时注意老浏览器display默认值、高清屏像素对齐及层叠上下文干扰。
伪元素边框为什么盖住内容或点不中按钮
伪元素默认渲染在内容上方，::before 一加就让文字不能选、链接点不了、焦点框错位，八成是层叠顺序没控好。最直接的解法是给伪元素加 z-index: -1，但必须确保它的父容器有 position: relative——否则 z-index 压根不生效。
如果内容本身带背景色（比如代码块高亮），用 box-shadow 替代 background 或 border 更稳妥，能绕过层叠干扰；临时排查时，直接在开发者工具里禁用 ::before，看交互是否恢复，比猜快得多。
用 ::before 模拟外边框时定位总偏移不准
不是 top: 0; left: 0 就完事了——那样伪元素和原元素完全重叠，边框根本看不出“双层”。关键在尺寸和偏移的配合：
-
width和height要比原元素大一圈：比如原边框2px+ 间隙4px+ 外边框2px，那伪元素宽高就得各加16px（2+4+2再 ×2） -
top和left得负向偏移：按公式(原border宽度 + 间隙 + 外border宽度) / 2算，上例就是-4px -
border-radius必须和原元素一致，否则内圆外方，一眼露馅 - 老浏览器（IE11、旧 Safari）里
::before默认是display: inline，不写display: block，width/height/border全部失效
响应式下装饰边框在小屏上太突兀或错位
固定像素的装饰条（如 width: 4px）在不同设备上观感差异大，更麻烦的是，当内容靠 padding-left 缩进时，这个值也得跟着变，否则文字离装饰条太近或太远。
立即学习“前端免费学习笔记（深入）”；
推荐做法：
- 装饰条宽度改用相对单位：
width: 0.25em或width: 2vw，随字号或视口缩放 -
padding-left同步用相同单位，保持视觉比例稳定 - 高清屏（
devicePixelRatio > 1）下1px边框易发虚，可用媒体查询适配：@media (-webkit-min-device-pixel-ratio: 2) { border-width: 2px } - 图片类装饰边框要防裁切：确保父容器没设
overflow: hidden，且img设了display: block和object-fit: cover
伪元素画三角、气泡、角标时定位总跑偏
这类装饰依赖绝对定位+盒模型微调，常见问题不是位置不对，而是基线或默认行内行为干扰：
- 父容器必须设
position: relative，否则::before会相对于body定位 - 用
border画三角时，要清空content并设display: block，否则老浏览器不渲染 - 右上角角标常用
top: 0; right: 0; transform: translate(50%, -50%)居中，比硬算top/right值更可靠 - 文字下方装饰图形，务必设
z-index: -1并确认父容器没触发新层叠上下文（比如没加opacity: 0.99或transform）
