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?