CSS Transition on the 'content' property of :before pseudo element

Question

Here's a fiddle demonstrating the problem: http://jsfiddle.net/c4MNs/

Essentially I am swapping out the contents of the content property under the i:before pseudo which works fine. However, I am unable to force a transition such that this swap occurs smoothly.

I followed the advice found in this answer: https://stackoverflow.com/a/19579514/765409

But you can see that this is not effective in this situation.

Answer 1

You can't apply transition to pseudo elements content property's content itself. You can apply transition to a pseudo element's opacity, width, height, its content's font-size and many more properties... but not the content property's content.