etiqueta - pseudo class before css

¿IE tachando el pseudo elemento CSS?

Question

He estado tratando de hacer que algunos pseudo elementos funcionen en IE, pero simplemente no me deja.

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

¿Alguien sabe 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:

Answer 1

Como tenía el mismo problema con Material Font e IE11 y no podía resolverlo con las soluciones anteriores, busqué más:

La documentación de los íconos de diseño de materiales menciona el uso

display: inline-block;

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: after elements es que HTML en el content -Tag se representa como texto sin formato que muestra el & # x .. por lo que debe usar / escape de la siguiente manera:

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

Answer 2

Consulte este enlace " http://.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 versiones anteriores, en ningún elemento.

Tampoco debe 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 "toma el primer elemento dom después de * el texto de entrada (+) y establece su contenido anterior en el valor * (: antes). * /

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

Answer 3

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

Una vez más, sin embargo, estos estilos se están aplicando de hecho a los elementos correctos, independientemente de lo que las herramientas del desarrollador crean o sugieran. Puede confirmar esto ejecutando el elemento padre y los dos pseudoelementos 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 );
    });

}());

Comprobaré si ya tenemos un problema interno para rastrear este error y agregaré esta pregunta. En términos generales, tratamos de dar a cuestiones como esta 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 boleto puede ayudarnos a avanzar una solución :)

Answer 4

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

content:  "/e5c5";

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

Answer 5

Tuve exactamente este mismo problema! Debe proporcionar a sus pseudo elementos :before y :after una propiedad de display .

Agregue lo siguiente a :before y :after .

display: block; 

Esto debería solucionar su problema. :)