用::after伪元素实现按钮hover动态描边，核心是相对定位按钮+绝对定位伪元素覆盖，初始缩放隐藏（scale(0)）或偏移隐藏，hover时transform展开并transition平滑动画。
用 ::after 伪元素实现按钮 hover 时的动态描边效果，核心思路是：让伪元素覆盖在按钮上，初始状态只显示边框（透明背景 + 线条色边框），通过 transform 缩放或位移隐藏，再在 hover 时动画展开描边。
1. 基础结构与定位准备
确保按钮有相对定位（position: relative），这样 ::after 才能相对于它绝对定位并完全覆盖：
- 按钮本身设
position: relative，不加边框（描边交给伪元素） -
::after设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 为避免触发文字层叠问题，可加
z-index: -1或pointer-events: none
2. 描边样式与初始隐藏
描边本质是伪元素的 border，但初始要“不可见”。常用两种方式：
-
缩放隐藏法：初始
transform: scale(0)，hover 时scale(1)，配合border: 2px solid #007bff -
偏移隐藏法：初始
transform: translate(-50%, -50%) scale(0)，定位到中心再缩为 0；hover 时translate(-50%, -50%) scale(1)，再配合top: 50%; left: 50% - 记得加
content: ""和box-sizing: border-box，确保边框算在尺寸内
3. 添加平滑动画
描边出现不能突兀，需用 transition 控制变化过程：
立即学习“前端免费学习笔记（深入）”；
- 在
::after上写：transition: transform 0.4s ease, opacity 0.3s ease - 如果希望描边“从中间向外扩散”，用
scale(0) → scale(1) - 如果希望“从四周向内收拢显现”，可用
scale(2) → scale(1)并配合opacity控制 - 建议搭配
will-change: transform提升动画性能（尤其复杂页面）
4. 进阶：描边分段动画（如逐边出现）
若想实现“上→右→下→左”依次描边，需放弃单个伪元素，改用四个伪元素（::before, ::after + 两个自定义类）或 CSS @keyframes 配合 clip-path。但更轻量的做法是：
- 用一个
::after，设置border: 2px solid transparent - hover 时仅设置
border-color: #007bff，再配合transition: border-color 0.3s - 虽无“动态绘制”感，但简洁可靠，兼容性更好
基本上就这些。关键不是堆代码，而是理解伪元素如何借位、缩放和过渡——描边只是视觉结果，动画逻辑藏在 transform 和 transition 的配合里。
