Transições CSS3 em pseudo-elementos (: depois, antes) não funcionando?
Estou mostrando otitle
atributo de um link em:hover
. O atributo title é anexado ao link via:after
…
Agora eu estou querendo saber como eu posso animar a opacidade do:after
pseudo-elemento quando pairando e pairando.
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>
Confira a demonstração:http://jsfiddle.net/d2KrC/
Alguma idéia porque isso não está funcionando? Detalhes