JSFiddle - React, Tailwind, and code Playground

HTML

<div id="splash">
    <div id="name">
        <div class="container">
            random title
            <div class="slider"></div>
        </div>
    </div>
</div>

CSS

#splash {
    width:100%;
    height:100%;
    position:fixed;
}
.container {
    position: relative;
}
.slider {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background-color: #000;
    width: 0%;
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    left: 50%;
    transform: translate(-50%, 0);
    position:absolute;
    top:40%;
    margin:0 auto;
}

JavaScript

$('.slider').animate({
	    width: $('#name').width()
	}, 4000);