Le transizioni CSS3 su pseudo-elementi (: dopo,: prima) non funzionano?

Question

Sto mostrando l'attributo title di un collegamento su :hover. L'attributo title viene aggiunto al link via :after ...

Ora sto chiedendo come posso animare l'opacità del pseudo-elemento :after quando si passa-in e librarsi-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; 
} 

Partenza demo: http://jsfiddle.net/d2KrC/

Tutte le idee perché questo non sta funzionando?

Answer 1

WebKit (Chrome, Safari) non supporta le transizioni su pseudo elementi.

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

Dovrebbe funzionare in Firefox.

Modifica: Il problema in WebKit is now resolved. La patch è già arrivata in Chrome Carnery, quindi sarà supportata dalla versione 26 in poi. Non so Safari.

Answer 2

C'è una soluzione abbastanza facile a questo bug del webkit per far funzionare le transizioni su pseudo classi. Ecco un ottimo post sul blog: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

In pratica, il webkit non supporta direttamente le transizioni ma è possibile applicare la transizione e lo stile che si desidera modificare al relativo elemento padre. Quindi nella pseudo classe hai messo le stesse proprietà di stile che vuoi influenzare, ma dai loro il valore: inherit. Ciò farà in modo che ereditino tutti i valori degli elementi parent compresi la transizione.

Ecco un esempio che ho fatto per animare il: dopo elemento, su e giù

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; 
} 

* Aggiornamento Il bug è stato risolto in Chrome Canary (a febbraio), ma ancora sembra essere rotto in Safari. Può controllare lo stato e rimanere aggiornato su di esso qui: https://code.google.com/p/chromium/issues/detail?id=54699