¿Las transiciones CSS3 en pseudo-elementos (: después,: antes) no funcionan?
Estoy mostrando eltitle
atributo de un enlace en:hover
. El atributo del título se adjunta al enlace a través de:after
…
Ahora me pregunto cómo puedo animar la opacidad del:after
pseudo-elemento cuando se desplaza hacia dentro y hacia afuera.
html
<code><a class="link" href="#" title="something"></a> </code>
css
<code>.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; } </code>
Echa un vistazo a la demostración:http://jsfiddle.net/d2KrC/
¿Alguna idea de por qué esto no está funcionando? Al aire libre