JSFiddle - React, Tailwind, and code Playground

by winns

HTML

<div class="linkBox">
    <div class="linkNormalBox">
        <a href="#">TEST TEST TEST</a> <!-- white -->
    </div>
    
    <div class="linkHoverBox"> <!-- on hover animate width -->
        <a href="#">TEST TEST TEST</a> <!-- orange -->
    </div>
</div>

CSS

body {background: #222;}
a{text-decoration: none; font-size: 32px;}
.linkBox{
    position: relative;
    margin: 50px;
}
.linkNormalBox{
    position: absolute;
    top: 0; left: 0;
}
    .linkNormalBox a{color: #fff;}

.linkHoverBox{
    position: absolute;
    top: 0; left: 0;
    width: 0;
    overflow: hidden; 
}
    .linkHoverBox a{color: #f90;}

JavaScript

$('.linkHoverBox').height( $('.linkNormalBox').height() );
$('.linkBox').hover(
    function () {
        $('.linkHoverBox').animate({
            'width' : 400
        }, 350);
    },
    function () {
       $('.linkHoverBox').animate({
            'width' : '0'
        }, 350);
    }
);