如何在 :before pseudo class 中使用 !important 覆盖样式

Question

情况是这样的。我正在尝试禁用所有动画。所以我将这个 class 放入 body 的

class collection:
.no-transition * {
-webkit-transition: none !important;
-moz-transition: none !important;
-ms-transition: none !important;
-o-transition: none !important;
transition: none !important;
}

It works for the most part, except for the toggle button that implements animation using:

.slider:before {
position: absolute;
content: '';
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: 0.4s;
transition: 0.4s;
}

.no-transition 似乎没有覆盖 .slider:before 所有帮助将不胜感激。谢谢

Answer 1

好吧，这取决于您的 :before 和 .no-transition 对齐的位置，但是像这样的内容应该涵盖这些方面：

.no-transition *, .no-transition:before, .no-transition *:before {
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}