JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<div>
  <i>Icon <span>txt</span></i>  
</div>

CSS

div {
  width: 100px;
  background-color: #212121;
  color: #fff;  
}

div i {
  display: block;
  text-align: center;
  position: relative;
}

span { 
  display: none;
}

i:hover {
  left: -20px;
  animation: all 1s ease;
}

i:hover span {
  display: inline-block;
  animation: width 1s ease;
}