JSFiddle - React, Tailwind, and code Playground

by davidpauljunior

HTML

<div>Hover</div>

CSS

div {
    overflow: hidden;
    cursor: pointer;
    position: relative;
}

div:after {
    content: " - positive!";
    display: inline-block;
    position: absolute;
    bottom: -50px;
    transition: bottom 250ms ease-out 0;
}

div:hover:after {
    bottom: auto;
    transition: bottom 250ms ease-out 3s;
}