Przejścia CSS3 na pseudoelementach (: po,: przed) nie działają?
Pokazujętitle
atrybut łącza:hover
. Atrybut title jest dołączany do łącza za pośrednictwem:after
…
Teraz zastanawiam się, jak mogę animować nieprzezroczystość:after
pseudoelement podczas wsuwania i wysuwania.
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>
Sprawdź demo:http://jsfiddle.net/d2KrC/
Jakieś pomysły, dlaczego to nie działa?