0

I have created a navigation menu which has a 'sliding underline' effect for each hyperlink.

JS Fiddle: http://jsfiddle.net/ZZuQR/12/

RELEVANT CODE:

/* 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;
            }

This solution works in Chrome but not in Safari. Does anyone know why this might be?

4

1 回答 1

1

Transition of pseudo elements are not yet supported by Safari. Here:

CSS Transition on pseudo element did not work on Safari

and here:

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

于 2013-10-24T16:10:20.027 回答