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

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

by Kelly Hawker

HTML

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Rokkitt&amp;.css">
<ul>
    <li><b>♥</b><a href="#"><i>29 Likes</i></a></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 a:hover {
            color: #c33;
        }
        li a i {
            float:right;
            display: block;
            padding-right: 1em;
            font:1em/1 'rokkitt', sans-serif;
        }
    li b {
        color: #c33;
        line-height:1;
        font-size: 25px;
        display: inline-block;
        padding:.125em .375em;
    }
    li:hover {}
        li:hover a {
            opacity: 1;
            max-width: 150px;
            transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color .2s;
        }