Menu
How to enable -webkit-animation for :before and :after pseudo elements?
You can see in http://jsfiddle.net/4rnsx/ that it is not working for :before and :after.
And here I am trying to enable this feature with Mootools http://jsfiddle.net/6bzCS/.
Mozilla - will support it in Firefox 4 https://developer.mozilla.org/en/CSS/-moz-transition-property
W3C - CSS3 supports transition-property for all elements, :before and :after pseudo elements http://www.w3.org/TR/css3-transitions/#transition-property
Update: How to enable fadein,fadeout for CSS3 tooltip http://css-plus.com/2010/04/create-a-speech-bubble-tooltip-using-css3-and-jquery/ and demo?
626
A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to: Style the first letter, or line, of an element. Insert content before, or after, the content of an element.
The input element has no content in the CSS view, and so has no :before or :after pseudo content. This is true of many other void or replaced elements.
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.
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 jsFiddle mentioned in the question appears fine in modern Chrome and Safari browsers. I think the animation side of thing's been solved by browser evolution.
However, there's still an outstanding/open bug for the transition side of things: http://code.google.com/p/chromium/issues/detail?id=54699
163
The bug is fixed in Google Chrome 24 on January 3rd, 2013.
Waiting for Safari to pull these updates.
See how things are doing with other browsers here
31
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
