title: IE crossing out pseudo element CSS?
body: <p>I've been trying to get a few pseudo elements to work on IE, but it just doesn't let me.</p>
  
  <p>It crosses out the CSS and acts like it's not there, which kinda aggrevates me.</p>
  
  <p>Would anyone know what I'm doing wrong? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.newbutton {
    border-radius: 50%;
    width: 74px;
    height: 74px;
    position: relative;
    background-color: black;
    margin: 60px 0px 25px 17px;
    overflow: visible;
  }
  
  .newbutton:before {
    content: "f";
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    z-index: -1;
    top: 37px;
    left: 37px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation-name: fadecolor;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: fadecolor;
    animation-duration: 5s;
    animation-iteration-count: infinite;
  }
  
  .newbutton:after {
    content: "";
    width: 80px;
    height: 80px;
    position: absolute;
    border-radius: 50%;
    z-index: -2;
    top: -3px;
    left: -3px;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#01BAE8), to(#0183D5));
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="starttour"&gt;
    &lt;div class="newbutton headerbutton"&gt;
      &lt;span class="iconhead icon-02-arrow-icon"&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;p&gt;START TOUR&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Screenshot of what happens:</p>
  
  <p><img src="https://i.stack.imgur.com/IVR1Q.png" alt=""></p>