http://fonts.googleapis.com/css?family=Rokkitt

http://stackoverflow.com/q/16379881/154877

by Sharanpreet Kaur

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rokkitt&amp;.css">
<ul>
    <li><a href="#"><i>29 Likes</i></a><b>♥</b></li>
    <li><b>♫</b><a href="#"><i>2 Comments</i></a></li>
    <li><b>♡</b><a href="#"><i>design, link</i></a></li>
</ul>

CSS

body {
    font:1em/1.4 sans-serif;
}
li {
    overflow: hidden;
    background: #ddd;
    list-style: none;
    white-space:nowrap;
    margin-right: 10px;
    border-radius: 25px;
    display: inline-block;
}
    li a {
        opacity: 0;
        color: #666;
        max-width: 0;
        display: inline-block;
        text-decoration: none;
        transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color;
    }

    li:hover {}
        li:hover a {
            opacity: 1;
            max-width: 50px;
            transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color .2s;
        }