how to override style using !important in the :before pseudo class

Hello,
so here is the situation. I am trying to disable all animations. so I injust this class into the body's 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 doesn't seem to override the .slider:before
All help will be appreciated. Thanks