JSFiddle - React, Tailwind, and code Playground

by Bhabani Raju

HTML

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

</div>

CSS

.slider {
    position: absolute;
    display:block;
    left: 0;
    top:90%;
    margin:0 auto;
    height: 2px;
    background-color: #000;
    width: 0%;
    transition: width 1s;
}
#splash {
    width:100%;
    height:100%;
    background-color:#fff;
    z-index:999999;
    position:fixed;
}
#name {
    color:#000;
    font-family:'Arial-BoldMT';
    font-weight:bold;
    font-size:50px;
    letter-spacing: -2px;
    display:block;
    left: 50%;
    transform: translate(-50%, 0);
    position:absolute;
    top:40%;
    margin:0 auto;
}
#name:hover > .slider {
    width: 100%;
}