CSS Transitions with :before and :after pseudo elements
41,619
Solution 1
Fixed in Google Chrome on January 3rd, 2013.
By now (I do update this list) it's supported in:
- FireFox 4.0 and above
- Chrome 26 and above
- IE 10 and above
Waiting for Safari and Chrome for Android to pull these updates.
You can test it yourself in your browser, or
See the browser support table.
Solution 2
Well, actually, you can.
You just need to leverage the often forgotten inherit
value.
Unfortunately we can't (yet) directly target pseudo-elements with custom animations, but we surely can let them share the same animation of the "parent" element by inheriting the properties we wish to animate.
See my fiddle here.
Solution 3
Author by
cjroebuck
Updated on July 24, 2020Comments
-
cjroebuck almost 4 years
Can't seem to animate pseudo elements with -webkit-transition. The fiddle below shows what I mean when run in Chrome/Safari, I guess this isn't supported right now?
-
vsync about 11 yearsit's actually not fixed on production, only development. means that still, you cannot do this in Chrome.
-
jamesplease about 11 yearsThis is the most under-appreciated answer of this question.