CSS transitions for pseudo elemenrts

HTML

<div id="foo">Transition to something</div>
<div id="clear">Clear the transition</div>

CSS

#foo {
    background-color: blue;
    height: 20px;
    float: left;
    margin: 1em;
}
#clear {
    background-color: orange;
    height: 2em;
    float: right;
    padding: 3em;
    margin: 1em;
}
#foo:after {
    content: '';
    width: 200px;
    height: 100px;
    background: red;
    opacity: 0.2;
    display: block;
    transition-property: width, height, opacity;
    transition-duration: 2s;
}

#foo.selected:after {
    width: 400px;
    height: 500px;
    opacity: 0.9;
}

JavaScript

function initElement() {
  var p = document.getElementById("foo");
  var c = document.getElementById("clear");
  p.onclick = function() {
    p.classList.add("selected");
  }
  c.onclick = function() {
    p.classList.remove("selected");
  }
};

initElement();