css - CSS スライド下線は Safari で機能しませんか?

Question

各ハイパーリンクに「スライドする下線」効果のあるナビゲーション メニューを作成しました。

JS フィドル: http://jsfiddle.net/ZZuQR/12/

関連コード:

/* sliding underline */

    nav li a:after {
        content: " ";
        display:block;
        margin: 5px 0px 0px 0px;
        border-bottom: 3px solid transparent;
        width: 0px;
        transition: 0.5s ease;
        }

        nav li a:hover:after {
            border-bottom: 3px solid #0076a3;
            width:50px;
            }

このソリューションは Chrome では機能しますが、Safari では機能しません。これがなぜなのか誰か知っていますか？