JSFiddle - React, Tailwind, and code Playground

HTML

<span class="test a b"></span>
<span class="test b"></span>
<span class="test a b c"></span>

<p>
    The first two blocks at the top of this Fiddle should be of equal size.
    If you look at this Fiddle in IE (9-11), it will render the first
    block at double the size.
</p>
<p>
    When multiple rules targeting a generated content pseudo-element apply
    and those rules attempt to set a font size, then IE will apply the sizes
    in a chain rather than only applying the last.
</p>
<p>
    A temporary workaround is implemented on the last block, giving it the
    correct size, by using an interstitial rule that first resets the font
    size back to 1rem.
</p>

CSS

.test {
    display : inline-block;
    margin  : 2px;
}
.test::before {
  border    : 1px solid black;
  content   : "";
  display   : block;   
  font-size : 1em;
  height    : 1em;
  width     : 1em;
}

.test.a::before { font-size : 2em }
.test.c::before { font-size : 1rem; }
.test.b::before { font-size : 2em }