Animating pseudo-element background colour

by FiNGAHOLiC

HTML

<div class="yay"></div>
<div class="nay"></div>

CSS

body {
    padding: 3em;
}
div {
    border: 2px solid black;
    display: inline-block;
    height: 100px;
    margin-right: 3em;
    position: relative;
    width: 100px;
    -webkit-transition: .5s;
       -moz-transition: .5s;
        -ms-transition: .5s;
         -o-transition: .5s;
            transition: .5s;
}
div:after {
    content: '';
    height: 3em;
    left: 4em;
    position: absolute;
    top: 4em;
    width: 3em;
}
div:hover {
    background: blue;
    border-color: white;
}
.yay {
    background-color: green;
}
.yay:after {
    background-color: inherit;
    border: inherit;
}
.nay {
    background-color: red;
}
.nay:after {
    background-color: red;
    border: 2px solid black;
}
.nay:hover:after {
    background: blue;
    border-color: white;
}

JavaScript

// Note that the use of inherit on the pseudo-element enables transitioning