IE tachando CSS de pseudoelemento?

He intentado que algunos pseudo elementos funcionen en IE, pero no me lo permite.

Tacha el CSS y actúa como si no estuviera allí, lo que me agrega un poco.

¿Alguien sabría lo que estoy haciendo mal?

.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));
}

<div class="starttour">
  <div class="newbutton headerbutton">
    <span class="iconhead icon-02-arrow-icon"></span>
  </div>
  <p>START TOUR</p>
</div>

Captura de pantalla de lo que sucede:

Este es un problema conocido, pero los estilos de hecho se están aplicando. Las herramientas de desarrollo creen que los estilos de los pseudoelementos están siendo reemplazados por los estilos correspondientes de los elementos principales. Esto se demuestra fácilmente inspeccionando el estilo Computado del elemento padre y observando (lo que las herramientas F12 creen que son) estilos en competencia:

Sin embargo, nuevamente, estos estilos se están aplicando a los elementos correctos, independientemente de lo que crean o sugieran las herramientas de desarrollo. Puede confirmar esto ejecutando sobre el elemento principal y los dos pseudo-elementos y registrando su altura calculada:

(function () {

    var el = document.querySelector( ".newbutton" );

    [ "", "::before", "::after" ].forEach(function ( e ) {
        // Output: 74px, 80px, 80px
        console.log( window.getComputedStyle( el, e ).height );
    });

}());

Verificaré si ya tenemos un problema interno que rastrea este error y agregaré esta pregunta. En términos generales, tratamos de prestar a problemas como este la cantidad de atención proporcional a la cantidad de dolor que el problema está causando en el mundo real. Entonces, tener su pregunta como una nueva adición en el ticket puede ayudarnos a avanzar en una solución :)

¡Tuve exactamente el mismo problema! Debes darle una propiedad a tus :beforey :afterpseudo elementos display.

Agregue lo siguiente a :beforey :after.

display: block; 

Esto debería solucionar su problema. :)

Para agregar a la respuesta anterior. Intenté display: block pero mi problema era que la imagen de fondo salía deformada. En su lugar, utilicé a continuación:

display: inline-block;

Esto solucionó mi problema con imágenes deformadas dentro de mi: antes: después

Como tuve el mismo problema con Material Font e IE11 y no pude resolverlo con las soluciones anteriores, miré más allá:

La documentación de los iconos de material design menciona el uso

<i class="material-icons">&#xE87C;</i>

para navegadores que no admiten ligaduras. Los puntos de código para cada elemento se enumeran aquí: https://github.com/google/material-design-icons/blob/master/iconfont/codepoints

El problema con los elementos: after es que HTML en la contentetiqueta -Tag se representa como texto sin formato mostrando el & # x .. por lo que debe usar el \ escape de la siguiente manera:

content:  "\e5c5";

¡Tuve exactamente el mismo problema! Debes darle una overflow : visiblepropiedad al padre de tu pseudo elemento .

Consulte este enlace " http://stackoverflow.com/questions/2587669/can-i-use-the-after-pseudo-element-on-an-input-field ", como se cita en este enlace

: after y: before no son compatibles con Internet Explorer 7 y anteriores, en ningún elemento.

Tampoco está diseñado para usarse en elementos reemplazados como elementos de formulario (entradas) y elementos de imagen.

En otras palabras, es imposible con CSS puro.

/ * * El truco está aquí: * este selector dice "tomar el primer elemento dom después * del texto de entrada (+) y establecer su contenido anterior al * valor (: before). * /

input#myTextField + *:before {
       content: "👍";
    }