如何实现鼠标悬停时按钮文本添加»符号的平滑CSS过渡动画？

问题描述（翻译后） #

我希望鼠标悬停按钮时，给按钮文本添加右双角引号（»），并通过平滑的CSS动画/过渡实现效果。目前代码能实现功能，但鼠标悬停时文本会跳动而非平滑过渡——尽管已经加了transition属性。W3Schools的动画按钮示例效果不错，但不适用于多行文本的按钮。红蓝边框仅用于调试。请问怎么让文本实现平滑过渡？欢迎提供任何提示。

附：感谢Paulie_D的解答，最终代码可查看相关示例。

解决方案 #

核心问题是直接修改文本内容会触发元素宽度突变，导致跳动。要适配多行文本且实现平滑过渡，需把引号作为独立元素控制，而非直接修改按钮文本。以下是具体实现：

实现思路

• 用按钮的伪元素（如::after）承载右双角引号，默认设置为透明/移出可视区域
• 通过transition控制伪元素的透明度、位移属性，实现平滑出现效果
• 伪元素采用绝对定位，不干扰按钮内文本的正常排版，完美兼容多行场景

示例代码

.button {
  position: relative;
  /* 保留原有调试边框或自定义样式 */
  border: 1px solid red;
  padding: 8px 16px;
  background: #fff;
  cursor: pointer;
  /* 确保多行文本正常换行 */
  white-space: normal;
  line-height: 1.5;
}

.button::after {
  content: '»';
  position: absolute;
  right: 8px;
  opacity: 0;
  transform: translateX(5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* 继承按钮文本样式，保证视觉统一 */
  font-size: inherit;
  color: inherit;
}

.button:hover::after {
  opacity: 1;
  transform: translateX(0);
}

关键说明

1. 伪元素承载引号，避免直接修改文本引发的布局跳动
2. 用opacity控制可见性、transform: translateX()控制位移，两者均支持transition平滑过渡
3. 绝对定位的伪元素不占用文档流空间，不影响多行文本的正常排版
4. 可通过调整right和transform的数值，自定义引号的初始位置和移动距离

这样修改后，鼠标悬停时引号会从右侧平滑移入并显现，按钮文本不会出现跳动，同时完全适配多行文本按钮。

内容的提问来源于stack exchange，提问作者BogisW