CSS3 transitions on pseudo-elements (:after, :before) not working?

Question

I'm showing the title attribute of a link on :hover. The title attribute is appended to the link via :after… 

Now I'm wondering how I can animate the opacity of the :after pseudo-element when hovering-in and hovering-out.

html

<a class="link" href="#" title="something"></a>​

css

.link {
    display:block;
    width:50px;
    height:50px;
    background:red;
}

.link:after {
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;
}

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1;
}

Check out the demo: http://jsfiddle.net/d2KrC/

Any ideas why this is not working? ​

Answer 1

WebKit (Chrome, Safari) does not support transitions on pseudo elements.

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

It should work in Firefox.

Edit: The issue in WebKit is now resolved. The patch allready landed in Chrome Carnery, so it will be supportet from version 26 on. I don't know about Safari.

Answer 2

Theres a fairly easy workaround to this webkit bug to make transitions work on pseudo classes. Here's a great blog post about it: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

Basically webkit doesnt support the transitions directly but you can apply the transition and style you want to change to its parent element. Then in the pseudo class you put the same style properties that you want to affect, but give them the value: inherit. That will cause them to inherit all of the parent elements values including the transition.

Here's a sample I did to animate the :after element, up and down

a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */
    top: 1px; /*doesnt move it because it is position static */
    -webkit-transition: top 200ms ease 0;
}
a:after {
    content: '';
    position: absolute;
    top: inherit;
}
a:hover {
    top: 3px;
}

*Update The bug has been fixed in Chrome Canary (as of February), but still appears to be broken in Safari. Can check the status and stay updated on it here: https://code.google.com/p/chromium/issues/detail?id=54699