CSS按钮:hover展开图标旁文字 间距布局异常问题求解

问题根因 #

两处布局异常由三个写法问题导致：

• 原代码给.favourite-btn__text固定设置了margin-left: 0.5rem，即使文字处于max-width: 0的隐藏状态，外边距依然会占据布局空间，直接撑大按钮容器导致比例失调
• 原代码仅对max-width属性做过渡，文字和图标之间的间距是固定存在的，没有跟随展开动画同步变化，视觉上会出现展开后间距过近、间距跳变的问题
• 原CSS存在冗余代码：重复定义了两次margin-left属性，给按钮设置的width过渡没有对应宽度属性，属于无效规则

修复后代码 #

CSS 部分 #

.favourite-btn {
  position: absolute;
  display: flex;
  background-color: gray;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  border: 0;
  color: #fff;
  padding: 0.5rem;
}

.favourite-btn__text {
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
  color: white;
  /* 初始状态外边距为0，不占用额外布局空间 */
  margin-left: 0;
  /* 同时过渡宽度和外边距，保证动画同步 */
  transition: all 0.3s ease-in-out;
}
.favourite-btn:hover .favourite-btn__text {
  max-width: 15rem;
  /* 悬停展开时再添加图标和文字的间距 */
  margin-left: 0.5rem;
}

JSX 部分（无需改动原有结构） #

<button className="favourite-btn rounded-md">
  <AiOutlineHeart className="text-2xl favourite-btn__icon" />
  <span className="favourite-btn__text">Add to favourites</span>
</button>

可选TailwindCSS原生实现 #

如果不想编写自定义CSS，可直接通过Tailwind工具类+group悬停特性实现完全一致的效果，代码如下：

<button className="absolute flex bg-gray-500 items-center justify-center cursor-pointer outline-none border-0 text-white p-2 rounded-md group">
  <AiOutlineHeart className="text-2xl" />
  <span className="max-w-0 whitespace-nowrap overflow-hidden ml-0 group-hover:max-w-[15rem] group-hover:ml-2 transition-all duration-300 ease-in-out">Add to favourites</span>
</button>

效果说明 #

• 未悬停状态下，文字区域宽度为0、外边距为0，按钮尺寸和纯图标按钮完全一致，不会出现比例失调
• 悬停时文字宽度、图标文字间距同步平滑过渡，没有间距跳变、间距过近的问题
• 清理了原代码中的冗余规则，执行效率更高

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