CSS3 переходы на псевдоэлементах (: after,: before) не работают?

Я показываюtitle атрибут ссылки на:hover, Атрибут title добавляется к ссылке через:after& # X2026; & # xA0;

Теперь мне интересно, как я могу оживить непрозрачность:after псевдоэлемент при зависании и зависании.

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>

Проверьте демо:http://jsfiddle.net/d2KrC/

Есть идеи, почему это не работает?     & # X200B;

Ответы на вопрос(2)

Ваш ответ на вопрос