Menu
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?
http://jsfiddle.net/4rnsx/130/
759
CSS ::before and ::after pseudo-elements allow you to insert “content” before and after any non-replaced element (e.g. they work on a <div> but not an <input> ). This effectively allows you to show something on a web page that might not be present in the HTML content.
Pseudo-elements are like getting extra DOM elements for free. They allow us to add extra content, decoration and more to our pages without adding extra HTML, and they can be animated.
In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
The ::before pseudo-element can be used to insert some content before the content of an element.
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.
130
Fixed in Google Chrome on January 3rd, 2013.
By now (I do update this list) it's supported in:
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.
36
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
