After the mouse is triggered, the color fades from left to right
<!DOCTYPE html> <html> <head> <title>MyHtml</title> <meta charset="utf-8"> <style type="text/css"> .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{ height: 40px; 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; } </style> </head> <body> <div class="box"> <a data-hover="Company Profile" class="animate">Company Profile</a> </div> </body> </html>
.