JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
        <span>Link 1 text</span></a></li>
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
        <span>Link 2 text</span></a></li>
    <li><a href="#"><img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
        <span>Link 3 text</span></a></li>
</ul>

CSS

a span { display: inline-block; overflow: hidden; width: 0; white-space: nowrap; transition: width 1s ease-in; -webkit-transition: width 1s ease-in; }
a img { height: 16px; width: 16px; }
a:hover span { width: 75px; }