：beforeおよび：after擬似要素によるCSS遷移
-webkit-transitionを使用して擬似要素をアニメーション化できないようです。以下のフィドルは、Chrome/Safariで実行したときの意味を示しています。これは現在サポートされていませんか？
Googleで修正済みChrome 2013年1月3日。
今では（このリストを更新しています）、以下でサポートされています：
- FireFox 4.0以降
- Chrome 26以降
- IE 10以降
SafariとChrome for Androidこれらの更新を取得するのを待っています。
ブラウザで自分でテストする 、または
ブラウザサポートテーブル を参照してください。
まあ、実際、できます。
よく忘れられるinherit値を活用する必要があります。残念ながら、カスタムアニメーションを使用して（まだ）擬似要素を直接ターゲットにすることはできませんが、アニメーション化するプロパティを継承することで、「親」要素の同じアニメーションを共有させることができます。
私のフィドル こちら をご覧ください。