CSS 悬停箭头跳动问题的根源与稳定解决方案

按钮悬停时通过 :after 伪元素显示 font awesome 箭头，但鼠标移出瞬间箭头会短暂下移再消失——这是因 :hover 中意外触发 display: flex 导致布局重排所致，只需统一基础态与悬停态的 display 行为并强化垂直对齐即可彻底消除抖动。 按钮悬停时通过 :after 伪元素显示 font awesome 箭头，但鼠标移出瞬间箭头会短暂下移再消失——这是因 :hover 中意外触发 display: flex 导致布局重排所致，只需统一基础态与悬停态的 display 行为并强化垂直对齐即可彻底消除抖动。在 CSS 动画与交互设计中，伪元素（如 :after）的平滑过渡常被用于增强视觉反馈。但本例中出现的“悬停后移出时箭头向下跳动”现象，并非动画本身的问题，而是布局模式突变引发的重排（reflow）。? 问题根源分析原始代码中：默认状态下，#projects-btn 使用 text-align: center 实现水平居中，其内部文本流为 inline 模式；而 #projects-btn:hover 强制设为 display: flex; justify-content: center;，这会将按钮切换为 Flex 容器，导致其子内容（包括伪元素）的基线对齐方式、行内盒模型行为发生根本性变化；更关键的是：<button> 是替换元素（replaced element），其默认 display 为 inline-block；当 hover 时突然变为 flex，浏览器需重新计算盒模型尺寸与对齐逻辑，而 :after 伪元素在 position: relative 下仍受行内布局影响，造成垂直方向上的瞬时位移（即“下跳”）。? 简单说：不是动画不流畅，而是 hover 前后 display 类型不一致，破坏了布局稳定性。? 正确解法：保持 display 一致性 + 强制垂直居中应将 display: flex 和对齐属性提前声明在默认状态，而非仅在 :hover 中添加： 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。