直接用border做悬停边框不够灵活，因其变化会触发重排且无法实现中心扩散、单边滑入、渐变描边等效果；而::after伪元素作为独立渲染层，可自由定位缩放过渡，不干扰布局，但必须设content: ""、position: absolute、inset: 0（或明确方位），且父容器需加position: relative。
为什么直接用 border 做悬停边框不够灵活
纯 border 变化会触发重排（尤其是改变宽度时），且无法实现从中心扩散、单边滑入、渐变描边等动态效果。伪元素 ::after 本质是独立渲染层，可自由定位、缩放、过渡，不干扰原始元素布局。
::after 边框需要哪些必备 CSS 属性
缺一不可：必须设 content: ""（否则不渲染），position: absolute（脱离文档流便于控制位置），inset: 0 或明确的 top/right/bottom/left（定义覆盖范围）。父容器需加 position: relative 作为定位上下文。
-
content不能为空字符串以外的值，比如content: " "（带空格）也可能因空白处理失效，坚持用content: "" - 若父元素有
padding，inset: 0会让伪元素撑满整个盒区（含 padding 区），想贴合内容区就得手动计算top/left和尺寸 - 过渡动画必须写在伪元素上，比如
transition: transform 0.3s ease, opacity 0.2s，不能只写在父元素 hover 上
三种常用动态边框的实现差异
不同动效对应关键参数组合：
-
四边同时缩放：伪元素初始
transform: scale(0)，hover 时transform: scale(1)；注意需设transform-origin: center保证从中心展开 -
单边滑入（如底部）：伪元素高度为
2px，bottom: 0，初始width: 0，hover 时width: 100%；用transition: width 0.3s cubic-bezier(0.34, 1.15, 0.66, 1)模拟弹性感 -
双线描边（内外边框）：用两个伪元素
::before和::after，分别设不同inset值和border，hover 时仅动画其中一个的opacity或transform
容易被忽略的兼容性和性能坑
::after 动画在旧版 Safari（transform + scale 组合有闪烁，iOS 微信内置浏览器对 inset 支持不全（需回退到 top: 0; right: 0; bottom: 0; left: 0）。动画帧率依赖 GPU 加速，务必给伪元素加 will-change: transform（但别滥用，仅对频繁动画的元素加）。
立即学习“前端免费学习笔记（深入）”；
如果 hover 区域是按钮文字，伪元素覆盖范围过大可能遮挡点击，此时应限制 pointer-events: none 在伪元素上——这点几乎所有人一开始都会漏掉。
