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
<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;
}
Confira a demonstração:http://jsfiddle.net/d2KrC/
Alguma idéia porque isso não está funcionando? Detalhes