title: Internet Explorer 'input:checked + label:before' styling is not rendered
body: <p>I'm having some trouble getting the <code>:checked</code> styling for my custom checkboxes to display in Internet Explorer.</p>
  
  <p>They work perfectly fine in Chrome.</p>
  
  <p><a href="https://i.stack.imgur.com/Xgoiz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Xgoiz.png" alt="enter image description here"></a></p>
  
  <p>... but in IE</p>
  
  <p><a href="https://i.stack.imgur.com/1HZu9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1HZu9.png" alt="enter image description here"></a></p>
  
  <p>Here's the relevant styling</p>
  
  <pre><code>input[type="radio"], input[type="checkbox"] {
      opacity: 1;
      position: absolute;
      top: -9999;
  
      &amp; + label {
          vertical-align: middle;
      }
  }
  
  input[type="radio"] + label:before,
  input[type="checkbox"] + label:before {
      content: '\f3fd';
      font-family: 'Ionicons';
      width: 26px;
      height: 20px;
      border: 2px solid #45555F;
      font-size: 24px;
      color: transparent;
      display: table-cell;
      text-align: center;
      transition: all 0.3s linear;
      -webkit-transition: all 0.3s linear;
      -moz-transition: all 0.3s linear;
      -ms-transition: all 0.3s linear;
      -o-transition: all 0.3s linear;
      padding: 0 2px;
  }
  
  input[type="radio"]:checked + label:before,
  input[type="checkbox"]:checked + label:before {
      content: '\f383';
      font-family: 'Ionicons';
      font-size: 24px;
      width: 26px;
      height: 20px;
      text-align: center;
      display: table-cell;
      padding: 0 2px;
      border: 2px solid #45555F;
      color: #8ec549;
  }
  
  input[type="radio"] + label:before {
      border-radius: 50% !important;
  }
  </code></pre>
  
  <p>I did also notice that Internet Explorer simply removes the styling on load...</p>
  
  <p><a href="https://i.stack.imgur.com/OdykE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/OdykE.png" alt="enter image description here"></a></p>
  
  <p>Thanks for any help!</p>
  
  <p>EDIT: Codepen Demo (This demo does not work in IE either)</p>
  
  <p><a href="http://codepen.io/anon/pen/rLJqyK" rel="noreferrer">http://codepen.io/anon/pen/rLJqyK</a></p>