Generated content and transitionend

HTML

<h1>CSS</h1>

CSS

h1 {
    font-size: 200%;
    transition: 4s;
}
h1::after, h1::before {
    transition: 2s;
}
h1::after {
    content: ' 4';
}
h1::before {
    content: '3 ';
}
h1:hover {
    padding: 1em;
}
h1:hover::after, h1:hover::before {
    color: yellow;
}

JavaScript

document.addEventListener('transitionend', function(e) {
    console.log(e.currentTarget,e.propertyName);
    document.removeEventListener('transitionend', this);
});
document.addEventListener('webkitTransitionEnd', function(e) {
    console.log(e,e.propertyName);
});