Menu
Check out this fiddle: http://jsfiddle.net/sajYc/
The transition for the :after pseudo element works in firefox, but fails in webkit based browsers. Any idea if this is coming up in a future release? Any non-jquery overkill workarounds for it?
Basically, I'm using it on a page to fade between two states of a background image sprite(instead of two colors like in the fiddle). A smooth transition between an icon's normal and hover state. So I don't want to add a bunch of actual elements to it just to make this animation work.
567
Within CSS, we can specify a pseudo-element using ::before or ::after . The pseudo-element is then inserted within your element, between the element and any content. Since it acts as an element of it's own, it can be styled, positioned and more.
In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
after is not a valid value of transition . Instead put transition as a property of the :after selector. You can also have a different transition on the hover in and hover out state. This allows us to have a delay to show the pseudo-element but no delay to hide it.
The CSS ::before selector inserts content before a selected element. CSS :after inserts content after a specified element. These selectors are commonly used to add text before or after a paragraph or a link.
Unfortunately, this is a known issue in Webkit browsers and IE:
http://css-tricks.com/13555-transitions-and-animations-on-css-generated-content/
However, fading between image sprite states is do-able in jQuery. This tutorial gives a good run down:
http://www.tutorial9.net/tutorials/web-tutorials/creative-button-animations-with-sprites-and-jquery-part-2/
186
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
