javascript - How can I detect the animationend event on a pseudo element? -

i know how detect animationend event regular dom element, how do pseudo-element?

i know event animationend, how attach pseudo-element handler using event?

i have tried following, can't seem work.

document.queryselector("#someselector:after").addeventlistener("animationend",...,false) 

how can in vanilla javascript?

:after pseudo-elements can't selected though they're part of dom, because, in short, they're not part of dom. being said, possible event triggers you'd expect, they're fired on "parent" of :after.

for example, if have :after on dom element id of 'containybox', can grab dom element , trigger on animationend. event fire when :after's animation ends.

var containerbox = document.getelementbyid('containybox');      containerbox.addeventlistener('animationend', function() {   console.log("animation ended!"); }); 

full working snippet:

var containerbox = document.getelementbyid('containybox');    containerbox.addeventlistener('animationend', function() {    console.log("animation ended!");  });    containerbox.addeventlistener('transitionend', function() {    console.log("transition ended!");  });

#containybox {    position: relative;    width: 100px;    height: 100px;    background: #fadebc;    padding: 10px;    text-align: center;  }  #containybox:after {    content: "standard aftermibob.";    display: block;    position: fixed;    left: 120px;    width: 100px;    height: 100px;    background: #bcdefa;    animation: animatedbackground 1000ms linear;  }  #containybox:hover:after {    background: #bcfade;    transition: background-color 1000ms linear;  }  @keyframes animatedbackground {    {      background-color: #000000;    }    {      background-color: #bcdefa;    }  }

<div id="containybox">    standard containybox.  </div>