按钮悬停时通过 :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助手依托大模型帮助用户记录、整理和分析音视频内容体验用大模型做音视频笔记、整理会议记录。