Im making a list of contact links and am experimenting with using the :AFTER pseudo-element to insert a sprite into the same space on hover. The anchor tag has an image and I'm using the :after tag to give it the 'hover' image (floated left) which displays over the regular image. I set the :after image to have opacity: 0, and am using :hover:after to give it opacity: 1. It works beautifully... but the transition I'm trying to use to make it fade-in isn't working. I'm getting an instant switch with no transition. I've also tried putting the background image in the :hover:after selector with a transition on the background, which also works fine, though still no transition.

Here's my working nav demo
Anybody have a clue??

Here's the relevant CSS or VIEWSOURCE on the above link (which has a lot of irrelevant css from the main project to preserve the over-all style)

#email 
                    {   background: url("../images/email_icon.png") no-repeat  0 5px;
                        width: 30px;
                        height: 20px;
                    }  
                    #email:after
                        {   content: "";
                            background: url("../images/email_icon.png") no-repeat  0 -18px; 
                            float: left;
                            width: 30px;
                            height: 20px; 
                            opacity: 0;
                                -o-transition: opacity 1s;
                                -moz-transition: opacity 1s;
                                -webkit-transition: opacity 1s;
                            transition: opacity 1s;
                        }
                    #email:hover:after
                        {   opacity: 1.0;
                        }