JSFiddle - React, Tailwind, and code Playground

by gleezer

HTML

<div id='poo'>
    Regular el (animates ok)
</div>

CSS

#poo{
    content:'';
    display:block;
    height: 250px;
    width: 250px;
    -webkit-box-shadow: inset 0 0px 5px 0px black;
    color: white;
    background: blue;
    -webkit-transition: all .7s ease;
}

#poo:hover{
    background:red;
    height: 300px;
}

#poo:after{
    content:'After pseudo el (now animates :)';
    display:inline;
    height: inherit; /* here */
    width: inherit; /* here */
    -webkit-box-shadow: inset 0 0px 5px 0px black;
    color: white;
    background: inherit; /* and here */
    -webkit-transition: all .7s ease;
    position: absolute;
    left: 260px;
}