Close stacked expanding hovers: Take 1

Using pseudo elements to try and avoid the click getting confused as it move between the closely stacked links

by paullferguson

HTML

<ul>
    <li><a href="#"title="DAN MALL">DAN MALL</a></li>
    <li><a href="#"title="NAOMI ATKINSON"> NAOMI ATKINSON</a></li>
    <li><a href="#"title="TRAVIS SCHMEISSER"> TRAVIS SCHMEISSER</a></li>
    <li><a href="#"title="TRENT WALTON"> TRENT WALTON</a></li>
    <li><a href="#"title="ROBBIE MANSON"> ROBBIE MANSON</a></li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Six+Caps);

ul {
    padding: 20px;
}

li:nth-child(2n) {
    background: #DDD;
}

a {
    font: 40px/31px sans-serif;
    color: transparent;
    position: relative;
    display: block;
    height: 31px;
}

a:after {
    content: attr(title);
    opacity: 0.5;
    color: #000;
    position: absolute;
    top: 0;
    left: 0;
}

a:hover:after {
    font: 60px/51px sans-serif;
    opacity: 1;
    top: -34%;
}