如何在Webkit瀏覽器上爲之前的動畫製作僞元素？

Question

可能重複：
CSS3 transitions on pseudo-elements (:after, :before) not working?

我的CSS轉換隻適用於Firefox，......不知道爲什麼它沒有在Chrome，Safari或Opera動畫。

這裏是一個小提琴：http://jsfiddle.net/chovy/HUDuy/

HTML：

<ol class="steps"> 
     <li>Foo</li> 
     <li>Bar</li> 
     <li>Baz</li> 
</ol> 

CSS：

ol.steps { 
    list-style-type: none; 
    counter-reset: step-counter; 
    padding-left: 60px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 

ol.steps li { 
    position: relative; 
    padding: 10px 20px; 
    height: 50px; 
} 

ol.steps li:before { 
    content: counter(step-counter, decimal); 
    counter-increment: step-counter; 
    position: absolute; 
    left: -50px; 
    top: 10px; 
    border: 1px solid #ccc; 
    width: 45px; 
    height: 45px; 
    line-height: 45px; 
    border-radius: 50px; 
    background: #f9f9f9; 
    text-align: center; 
    font-size: 28px; 
    color: #aaa; 
    -webkit-transition: all 0.25s ease-in-out; 
    -moz-transition: all 0.25s ease-in-out; 
    -o-transition: all 0.25s ease-in-out; 
    -ms-transition: all 0.25s ease-in-out; 
    transition: all 0.25s ease-in-out; 
} 

ol.steps li:hover:before { 
    width: 60px; 
    height: 60px; 
    line-height: 60px; 
    left: -57px; 
    top: 2px; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    -ms-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

Answer 1

至於說here：

的WebKit（Chrome瀏覽器，Safari瀏覽器）不支持轉換在僞元素上。

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

火狐確實。