CSS 悬停箭头闪烁偏移问题的根源与稳定解决方案

本文解析按钮悬停时 ::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 —— 因为它们已在基础样式中声明，重复定义不仅无益，反而在旧版浏览器或复杂嵌套中可能触发意外重绘。优化后的完整关键样式如下： VWO 一个A/B测试工具