CSS hover时::after内容过渡效果不生效问题求助

你遇到的问题核心是：CSS过渡无法作用于content属性的变化，因为content是离散属性，没有中间状态可以插值，所以直接切换content必然是突然出现/消失的效果。

要实现平滑过渡，得换个思路：给伪元素设置初始的可见性相关属性（比如透明度、宽度），通过过渡这些可插值的属性来实现平滑显示/隐藏，同时配合content的设置。

修改后的CSS代码如下：

.projectFooter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.5em;
}
.projectTech {
  display: flex;
  justify-content: flex-end;
  gap: 1em;
}
.projectBtn {
  background-color: inherit;
  color: inherit;
  /* 让按钮能容纳伪元素的内容 */
  position: relative;
}

/* 伪元素初始状态：透明、宽度为0，避免占据空间 */
.projectBtn::after {
  content: " This project is made with the help of ReactJS.";
  position: absolute;
  opacity: 0;
  width: 0;
  overflow: hidden;
  transition: all 0.3s ease; /* 可调整过渡时长和曲线 */
  left: 100%;
  margin-left: 0.5em;
  white-space: nowrap; /* 防止内容换行 */
}

/* hover时让伪元素显示：透明度1、宽度自适应内容 */
.projectBtn:hover::after {
  opacity: 1;
  width: auto;
}

代码说明： #

• 给.projectBtn设置position: relative，让伪元素可以基于按钮定位
• 伪元素默认就设置好content，通过opacity:0和width:0隐藏，同时用overflow:hidden防止内容溢出
• hover时修改opacity和width，这两个属性支持CSS过渡，就能实现平滑的显示效果
• 用white-space: nowrap确保提示文本不会换行，保持一行显示

JSX部分无需修改，保持你原有的代码即可。

这样修改后，鼠标悬停按钮时，伪元素的内容就会平滑地显示出来，不会突然出现了。

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