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/