伪元素必须设 content: "" 才能渲染，否则浏览器跳过；父按钮需加 position: relative 以确保定位准确；动画应优先使用 transform 和 opacity；装饰性伪元素须设 pointer-events: none 防止事件拦截。
伪元素必须设 content: ""，否则根本不会渲染
这是最常被忽略的硬性前提：没有 content 的 ::before 或 ::after 在 CSS 规范中是“未生成”的，浏览器直接跳过渲染，动画自然无从谈起。哪怕你写了完整的 position: absolute、border、transition，只要漏掉这行，就等于白写。
常见错误包括：
- 只复制了样式片段，但没检查
content是否存在 - 误写成
content: none（无效值）或content: ''（单引号在部分旧浏览器中不兼容，推荐双引号） - 用 JS 动态移除了
content却没意识到它已让伪元素“消失”
父按钮必须加 position: relative，否则伪元素定位错乱
::before 和 ::after 是绝对定位时，会向上查找最近的「已定位祖先」（即 position 为 relative、absolute 或 fixed 的祖先）。如果按钮没设 position: relative，它们就会相对于 <body> 定位，导致边框线条飘到页面任意角落。
同时要注意：
立即学习“前端免费学习笔记（深入）”；
-
z-index必须显式设置：按钮本身建议z-index: 0，::before和::after按需设z-index: -1（压底）或z-index: 1（盖顶），不能依赖默认层叠顺序 - 移动端需额外加
-webkit-tap-highlight-color: transparent，否则点击瞬间高亮会打断动画连贯性 - 若按钮嵌套在
overflow: hidden容器里，伪元素可能被裁切——此时要确保伪元素的inset或top/left/right/bottom值足够外扩，且父容器有明确z-index
动画优先用 transform 和 opacity，别碰 width/height
用 width 或 height 控制边框展开（比如从 0 到 100%）会触发 Layout，尤其在频繁悬停时容易卡顿。而 transform: scaleX()、transform: scaleY() 或 transform: scale() 属于合成层操作，性能好得多。
典型安全写法示例：
.btn {
position: relative;
}
.btn::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border: 2px solid #333;
transform: scale(0.95);
opacity: 0;
transition: transform 0.4s ease, opacity 0.4s ease;
}
.btn:hover::before {
transform: scale(1);
opacity: 1;
}
关键点：
- 初始
transform: scale(0.95)比scale(0)更稳妥——避免 Safari 对全零缩放的渲染异常 - 加
will-change: transform到按钮本身（不是伪元素），提前提示浏览器启用硬件加速 - 避免在同一个伪元素上同时过渡
border-color和transform——颜色变化触发重绘，叠加位移可能增加合成开销
多层边框动画叠加时，pointer-events: none 不可省
当用 ::before 做外圈描边、::after 做内圈流动线，或两者都做不同方向的描边动画时，如果不加 pointer-events: none，这些覆盖在按钮上的伪元素会拦截鼠标事件，导致 :hover 失效或点击穿透失败。
正确做法是：
- 所有装饰性伪元素（非交互型）都加上
pointer-events: none - 若某伪元素需响应点击（比如作为波纹反馈层），则必须单独处理事件委托，不能依赖原生
click - 不要给伪元素设
cursor: pointer——它不会生效，反而暴露逻辑漏洞
复杂边框动画真正难的不是写多少层 ::before，而是每一层的定位基准、层级关系和事件穿透是否可控。漏掉任意一个 content、position: relative 或 pointer-events: none，都可能导致整段动画在某个浏览器或某个交互路径下突然失效。
