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 。有谁知道为什么会这样？

Answer 1

Safari尚不支持伪元素的转换。这里：

CSS Transition on pseudo element did not work on Safari

在这里：

http://css-tricks.com/transitions-and-animations-on-css-generated-content/