JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
				<li><span class="icon-like">♥</span><a href="#">29 Likes</a></li>
				<li><span class="icon-comments">♫</span><a href="#">2 Comments</a></li>
				<li><span class="icon-tags">§</span><a href="#">design, link</a></li>
			</ul>

CSS

ul li { display: inline-block; list-style-type: none; margin-right: 10px; background: #eee; }
ul li span { display: inline-block; }
ul li a { display: inline-block; width: 0; height: 0; overflow: hidden;  }
ul li:hover a  { transition: all 1s ease-out; width: 100%; height: auto; }
ul li:hover {  }