JSFiddle - React, Tailwind, and code Playground

HTML

<div class="btn">
    Click me
</div>
<div class="element">
    Div Box With Pseudo Element
</div>

CSS

* {margin:0;padding:0;box-sizing:border-box;}
body {font-family:Verdana;font-size:20px}

.btn {
    padding:20px;
    background:#777;
    color:white;
    cursor:pointer
}
.btn:hover {
    background:black;
}
.element {
    display:none;
    background:#eee;
    position:relative;
}
.element:after {
    content:" ";
    display:block;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    height:10px;
    width:0;
    background:black;
    transition:6s ease;
}
.element.clicked:after {
    width:100%;
}

JavaScript

$(document).ready(function(){
    $('.btn').on('click',function(){
       $('.element').stop().toggleClass('clicked').fadeToggle(3000);
    })
})