Animated arrows

Uses css3 animation to animate an arrow sliding out of each link

by Chris Nicholson

HTML

<ul>
    <li><a href="#">Hello world</a><span></span></li>
    <li><a href="#">Hello world</a><span></span></li>
    <li><a href="#">Hello world</a><span></span></li>
    <li><a href="#">Hello world</a><span></span></li>
</ul>

CSS

a {
    padding: 20px;
    display: inline-block;
    background: #C4F1FF;
    font: 1em Arial;
    color: #B2929C;
}

li span {
    display: inline-block;
    vertical-align: -24px;
    border-style: solid;
    border-color: #C4F1FF;
    border-right-width: 0;
    border-left-width: 0;
    border-top: 30px solid transparent;
    border-bottom: 29px solid transparent;
    -webkit-transition: border 0.2s;
}

li:hover span, li:focus span {
    border-left: 10px solid #C4F1FF;
}