.box{ position: relative; } .animate{ color: #ed6868; position: absolute; top: 0; left: 0; font-size: 30px; border-bottom:2px solid pink; } .animate:hover::before{ max-width: 100%; } .animate::before{ position: absolute; top: 0; left: 0; font-size: 30px; overflow: hidden; max-width: 0; color: #000; content: attr(data-hover); border-bottom:2px solid orange; -webkit-transition: max-width 0.5s; -moz-transition: max-width 0.5s; transition: max-width 0.5s; }