如何实现按钮文本与:after伪元素的CSS过渡同步？

问题核心在于伪元素:after未设置过渡动画，父元素的transition不会自动继承给伪元素，导致按钮文本有过渡效果，而图标颜色变化是瞬间触发，视觉上呈现出延迟不同步的现象。

以下是两种可行的调整方案：

方案一：给伪元素单独添加过渡属性 #

直接为.gform_button:after配置与父元素一致的过渡参数，确保两者动画节奏统一：

.gform_button {
  background: #363794;
  border: 2px solid #363794;
  border-radius: 50px;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 20px 0 0;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.5s ease; /* 明确过渡color属性，避免不必要的性能消耗 */
}

.gform_button:hover {
  color: #ff9b00;
  cursor: pointer;
}

.gform_button:after {
  color: #fff;
  content: "\f135";
  font: var(--fa-font-solid);
  font-size: 16px;
  margin-left: 5px;
  transition: color 0.5s ease; /* 给伪元素添加相同的过渡配置 */
}

.gform_button:hover:after {
  color: #ff9b00;
}

方案二：用CSS变量统一控制颜色（更易维护） #

通过CSS变量定义文本与图标的颜色，父元素hover时修改变量值，仅需给父元素设置过渡即可实现同步变化：

.gform_button {
  --btn-text-color: #fff; /* 定义统一的颜色变量 */
  background: #363794;
  border: 2px solid #363794;
  border-radius: 50px;
  color: var(--btn-text-color);
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 1px;
  margin: 20px 0 0;
  padding: 15px;
  text-decoration: none;
  text-transform: uppercase;
  transition: --btn-text-color 0.5s ease; /* 过渡变量值 */
}

.gform_button:hover {
  --btn-text-color: #ff9b00; /* hover时更新变量值 */
  cursor: pointer;
}

.gform_button:after {
  color: var(--btn-text-color); /* 伪元素继承同一变量 */
  content: "\f135";
  font: var(--fa-font-solid);
  font-size: 16px;
  margin-left: 5px;
}

两种方案都能实现文本与图标颜色的同步流畅过渡，方案二更便于后续颜色调整，只需修改变量值即可统一更新所有关联元素的颜色。

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