css - icon - ¿Es de alguna manera posible diseñar un iframes antes/después de un pseudo-elemento?

pseudo elementos css

Question

Como dice el título, ¿hay alguna manera de diseñar un ifsemes pseudo before / after ? ¿Sin envolver el iframe con otro div , o si no?

Traté de estilizarlo como cualquier otro elemento, pero no tuve éxito:

iframe::before {
    content: ''foo'';
    position: absolute;
    top: 0;
    left: 0;
}

iframe::after {
    content: ''bar'';
    position: absolute;
    top: 0;
    right: 0;
}

http://fiddle.jshell.net/ppRqm/

Actualizar

Una solución conocida es agregar el antes / el después a un elemento en el archivo fuente: http://fiddle.jshell.net/ppRqm/2/

Pero a veces no tienes acceso al archivo fuente.

Answer 1

No estoy seguro, pero creo que no es posible. O la lógica detrás de un iframe hace que sea imposible de lograr.

Como usted sabe, los pseudo-elementos se agregan a su contenedor , si hace eso con un iframe, los pseudo-elementos se agregarían dentro del iframe. Pero, y este es el problema, el contenido del iframe, el contenido en línea , solo se cargará si el navegador no admite iframes.

Esto significa que esto:

<iframe>
  <div>Your browser doesn''t support iframes</div>
</iframe>

Y agregar pseudo-elementos, hará lo mismo; en navegadores modernos, el contenido en línea no se mostraría .

Answer 2

Solución directa para depurar propósitos

Tengo un nivel de depuración CSS que da un outline a los elementos con código inválido u obsoleto. Aunque no es exactamente una respuesta, alguien puede encontrarlo útil ya que estaba tratando de encontrar una manera de garantizar visualmente que cualquier contenido incrustado con un iframe tuviera un valor / atributo allowfullscreen="true" . Este método alternativo utiliza un selector de hermanos y funciona bastante bien.

iframe:not([allowfullscreen]) + *::after
{
 background-color: #f00;
 border: #f00 solid 4px;
 color: #fff;
 content: ''Missing allowfullscreen attribute on iframe!'' !important;
 font-size: 24px;
 padding: 4px;
}

Estilo directo con tercer elemento

Si está buscando posicionarse en relación con el iframe, mi siguiente recomendación sería establecer la posición principal del iframe en position: relative; y luego establecer position: absolute; en un tercer elemento para que coincida con la representación del iframe. Por último, finalmente podría aplicar el ::after en ese tercer elemento.