伪元素（：after，：before）上的CSS3过渡不起作用？

Question

我正在显示title链接的属性:hover。title属性通过:after… 附加到链接。

现在，我想知道如何:after在移入和移出时动画化伪元素的不透明度。

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;
}

任何想法为什么这不起作用？

Answer 1

WebKit（Chrome，Safari）不支持在伪元素上进行过渡。

它应该可以在Firefox中使用。

编辑：
WebKit中的问题现在已解决。该修补程序已经可以在Chrome
Carnery中找到，因此它将从版本26开始支持。我不了解Safari。