JSFiddle - React, Tailwind, and code Playground

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 (no animation)';
    display:inline;
    height: 250px;
    width: 250px;
    -webkit-box-shadow: inset 0 0px 5px 0px black;
    color: white;
    background: blue;
    -webkit-transition: all .7s ease;
    position: absolute;
    left: 260px;
}

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