本文解析按钮悬停时 ::after 伪元素（如 Font Awesome 箭头）在鼠标移出瞬间短暂下移的成因，指出根本原因是 hover 状态下突变的 display: flex 触发了布局重排，并提供无需 JavaScript 的纯 CSS 稳定修复方案。
本文解析按钮悬停时 `::after` 伪元素（如 font awesome 箭头）在鼠标移出瞬间短暂下移的成因，指出根本原因是 `hover` 状态下突变的 `display: flex` 触发了布局重排，并提供无需 javascript 的纯 css 稳定修复方案。
该问题表面是视觉“抖动”，实则是 CSS 布局模型中一个典型的渲染不一致陷阱：当 #projects-btn:hover 被设置为 display: flex，而默认状态（非 hover）是 display: inline-block（按钮的天然显示类型），浏览器会在 hover 进入/退出时强制切换 display 类型，引发回流（reflow）——导致 ::after 伪元素的基线对齐方式、行内盒模型高度及垂直居中逻辑发生瞬时变化，从而出现“向下跳一下再消失”的视觉断裂。
✅ 正确解法不是在 :hover 中强行加 flex，而是让基础状态就具备稳定的 flex 容器语义，确保 hover 前后布局上下文完全一致：
#projects-btn {
/* ...原有样式保持不变... */
display: flex; /* ✅ 始终为 flex 容器 */
justify-content: center; /* ✅ 水平居中（基础态即生效） */
align-items: center; /* ✅ 关键！垂直居中，消除基线浮动 */
/* 移除 overflow: hidden（除非有其他裁剪需求，此处非必需） */
}
同时，需移除 #projects-btn:hover 中冗余的 display: flex 和 justify-content: center —— 因为它们已在基础样式中声明，重复定义不仅无益，反而在旧版浏览器或复杂嵌套中可能触发意外重绘。
优化后的完整关键样式如下：
#projects-btn {
font-size: 1.6rem;
width: 200px;
background: none;
color: #CBF281;
border: 1px solid #CBF281;
border-radius: 5px;
padding: 10px 0;
margin-top: 50px;
transition: all 1s;
text-align: center;
display: flex; /* ← 统一 display 类型 */
justify-content: center;
align-items: center; /* ← 核心：锁定垂直对齐 */
}
#projects-btn::after {
content: "\f178";
font: var(--fa-font-solid);
color: #CBF281;
padding-left: 0;
opacity: 0;
transition: opacity 0.5s ease, padding-left 0.5s ease;
/* 不再需要 position: relative 或 display: inline-block — flex 子项默认行为更可控 */
}
#projects-btn:hover::after {
opacity: 1;
padding-left: 15px;
}
/* hover 状态仅控制视觉属性，不变更布局结构 */
#projects-btn:hover {
cursor: pointer;
/* ❌ 删除：display: flex; justify-content: center; */
}
⚠️ 注意事项：
- align-items: center 是解决垂直偏移的关键——它让文本内容与 ::after 箭头在 flex 主轴（垂直方向）上严格对齐，避免因 vertical-align: baseline 导致的浮动；
- transition 应仅作用于可动画属性（如 opacity、padding-left），避免对 display、position 等触发重排的属性做过渡；
- 若按钮内含多行文本或图标复合结构，建议进一步用 line-height 或 min-height 配合 flex 确保高度一致性；
- Font Awesome 图标需确保 font-display: optional 或预加载，防止字体加载延迟造成初始渲染错位。
总结：CSS 动画的稳定性始于布局一致性。任何在交互状态中变更 display、position 或 float 的做法，都应被优先审视是否可前置到常态样式中。本例中，将 flex 布局“常态化”，辅以 align-items: center 锚定垂直基准线，即可彻底消除悬停箭头的闪烁与偏移，实现丝滑、专业的交互动效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
