JSFiddle - React, Tailwind, and code Playground

HTML

<div>Hover</div>

CSS

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

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

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