title: Why isn't this :after element working?
body: <p>I have a preloader on my page which should be displaying an animation. The animation should be showing on top of the dark black background before the page has loaded... but the animation is not displaying.</p>
  
  <p><a href="http://www.samnorris.net/portfolio-ss/" rel="nofollow noreferrer">http://www.samnorris.net/portfolio-ss/</a></p>
  
  <p>The animation works if I put it's CSS into #windowloader, but because I need it to be on top of a solid background (to hide unloaded content...) I thought to put it into an :after pseudo-class to load it on top of the #windowloader div... but for some reason this is not working.</p>
  
  <p>is my CSS incorrect, or something else...?</p>
  
  <p>Here is the Codepen which shows the animation that should be displaying:
  <a href="http://codepen.io/devilishalchemist/pen/emOVYQ" rel="nofollow noreferrer">http://codepen.io/devilishalchemist/pen/emOVYQ</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="windowloader"&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Relevant CSS from my page:</p>
  
  <pre><code>/* ==========================================================================
    PAGE LOADER
  ========================================================================== */
  
  
  .nonscroll {
    overflow: hidden;
  }
  
  
  #windowloader {
    overflow: auto;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 999998;
    display: table;
    background: $black;
  }
  
  #windowloader {
  
    &amp;:after {
  
    content: '';
    display: block;
    position: absolute;
    z-index: 999999;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    transform: translate(-50%, -50%) rotate(45deg) translate3d(0, 0, 0);
    animation: loader 1.2s infinite ease-in-out;
  
    span {
      position: absolute;
      display: block;
      width: 40px;
      height: 40px;
      background-color: #EE4040;
      animation: loaderBlock 1.2s infinite ease-in-out both;
  
      &amp;:nth-child(1) {
        top: 0;
        left: 0;
      }
      &amp;:nth-child(2) {
        top: 0;
        right: 0;
        animation: loaderBlockInverse 1.2s infinite ease-in-out both;
      }
      &amp;:nth-child(3) {
        bottom: 0;
        left: 0;
        animation: loaderBlockInverse 1.2s infinite ease-in-out both;
      }
      &amp;:nth-child(4) {
        bottom: 0;
        right: 0;
      }
    }
  
    /*LOAD FINISH*/
    .loaded {
      top: -100%;
    }
  
   }
  }
  
     @keyframes loader {
        0%, 10%, 100% {
          width: 80px;
          height: 80px;
        }
        65% {
          width: 150px;
          height: 150px;
        }
      }
      @keyframes loaderBlock {
        0%, 30% {
          transform: rotate(0);
        }
        55% {
          background-color: #F37272;
        }
        100% {
          transform: rotate(90deg);
  
        }
      }
      @keyframes loaderBlockInverse {
        0%, 20% {
          transform: rotate(0);
        }
        55% {
          background-color: #F37272;
        }
        100% {
          transform: rotate(-90deg);
        }
      }
  </code></pre>
  
  <p>FWIW, I have also tried:</p>
  
  <pre><code>#windowloader:after { }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>///////////////////////////////////////////////////////////////////////////
  // Window Loader
  ///////////////////////////////////////////////////////////////////////////
  
  
  $("#windowloader").transitioncss("transitionEndOpen","loaded",{duration:2000,delay:1000});
  
  $("#windowloader").off("transitionEndOpen").on( "transitionEndOpen", function(){
      $("body").removeClass('nonscroll');
      $("#windowloader").remove();
      $("#portfoliogrid").isotope('layout');
      $("#isotopeMembers").isotope('layout');
      $(".isotopeBlog").isotope('layout');
  });
  </code></pre>