JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mediaquery"></div>

CSS

#mediaquery{
  -webkit-transition: width .001s;
  -moz-transition: width .001s;
  -ms-transition: width .001s;
  -o-transition: width .001s;
  transition: width .001s;
}

@media all and (min-width: 10px) {
 #mediaquery {
   width: 50px;
 }
 #mediaquery:after {
   content: "small";
 }
}

@media all and (min-width: 600px) {
  #mediaquery{
    width: 100px;
  }
  #mediaquery:after {
   content: "medium";
 }
}

@media all and (min-width: 800px) {
 #mediaquery{
   width: 200px;
 }
 #mediaquery:after {
   content: "large";
 }
}

JavaScript

var mq = document.getElementById("mediaquery");

function eventCheck() {
    console.log(window.getComputedStyle(document.getElementById("mediaquery"), ":after").getPropertyValue("content"));
}

// Check for all browsers
mq.addEventListener('webkitTransitionEnd', eventCheck, true);
mq.addEventListener('MSTransitionEnd', eventCheck, true);
mq.addEventListener('oTransitionEnd', eventCheck, true);
mq.addEventListener('transitionend', eventCheck, true);