CSS滑动下划线在Safari中不起作用？

我创建了一个导航菜单，每个超链接都有“滑动下划线”效果

JS小提琴：

相关代码：

/* 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。有人知道为什么会这样吗？

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

在这里：

---

嗯，这很有趣，我不知道是这样的。谢谢为了保持更新，Safari 6.1+现在支持它；D