Transiciones CSS3 en pseudo-elementos (: después,: antes) ¿no funciona?

Question

Estoy mostrando el title atributo de un enlace en :hover. El atributo de título se añade al enlace a través de :after ...

Ahora me pregunto cómo puedo animar la opacidad de la pseudo-elemento :after cuando se pasa de entrada y de salida se cierne.

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

Mira la demostración: http://jsfiddle.net/d2KrC/

Cualquier idea por qué esto no está funcionando?

Answer 1

WebKit (Chrome, Safari) no admite transiciones en pseudo elementos.

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

Se debe trabajar en Firefox.

Editar: El problema de WebKit is now resolved. El parche ya aterrizó en Chrome Carnery, por lo que será compatible desde la versión 26 en adelante. No sé sobre Safari.

Answer 2

Hay una solución bastante fácil a este error de webkit para hacer que las transiciones funcionen en pseudo clases. Aquí hay una gran entrada de blog al respecto: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

Básicamente webkit no admite las transiciones directamente, pero puede aplicar la transición y el estilo que desea cambiar a su elemento principal. Luego, en la pseudoclase coloque las mismas propiedades de estilo a las que desea afectar, pero asígneles el valor: heredar. Eso hará que hereden todos los valores de los elementos principales, incluida la transición.

He aquí una muestra que hice para animar el: después de elemento, arriba y abajo

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

* Actualización El error se ha corregido en Chrome Canary (a febrero), pero todavía parece no estar funcionando en Safari. Puede verificar el estado y mantenerse actualizado aquí: https://code.google.com/p/chromium/issues/detail?id=54699