如何为特定ID按钮修改CSS :after伪元素hover样式？动画失效排查

问题根源 #

你添加的代码重复定义了带ID按钮的:after伪元素全部样式，包括transform: skewY(9.3deg) scaleY(0)。根据CSS优先级规则，类+ID+伪元素的权重（111）远高于类+伪类+伪元素（21），导致原.button-57:hover:after中的transform: scaleY(2)无法覆盖静态样式的scaleY(0)，伪元素始终处于隐藏状态，动画自然无法触发。

正确实现方式 #

不需要重复伪元素的位置、变换、过渡等基础样式，这些可直接继承自.button-57:after，只需针对不同ID的按钮在hover状态下修改:after的背景色即可：

修改后的CSS代码 #

/* 保留原.button-57的所有CSS样式不变 */

/* 新增针对不同按钮的hover背景色设置 */
.button-57#btnSaveChanges:hover:after {
  background-color: #2140D9;
}

.button-57#btnLogout:hover:after {
  background-color: #db2020;
}

说明 #

• 原.button-57:hover:after中的变换逻辑（scaleY(2)）会正常生效，我们仅追加了背景色属性，没有覆盖原有动画规则。
• 这种写法既满足“悬停时切换背景色”的需求，又保留了原按钮的动画效果，同时彻底避免了优先级冲突问题。

内容的提问来源于stack exchange，提问作者Mr. Blue