È possibile in qualche modo modellare uno iframe prima/dopo lo pseudo-elemento?

Question

Come dice il titolo, c'è un modo per disegnare uno iframe pseudo before/after? ? Senza avvolgendo l'iframe con un altro div, oppure `

ho provato per lo stile come qualsiasi altro elemento, ma senza successo:

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/

Aggiornamento

A soluzione nota è aggiungere il prima/dopo a un elemento nel file di origine: http://fiddle.jshell.net/ppRqm/2/

Ma a volte non si ha accesso al file sorgente.

Answer 1

Non sono sicuro, ma penso che non sia possibile. Oppure la logica dietro un iframe rende impossibile raggiungere.

Come sapete, gli pseudo-elementi sono aggiunto al suo contenitore, se lo fai con un iframe, pseudo-elementi saranno aggiunti all'interno del iframe. Ma, ed ecco il problema, il contenuto iframe, il contenuto in linea , verrà caricato solo se il browser non supporta iframe.

Ciò significa che questo:

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

E l'aggiunta di pseudo-elementi, farà la stessa cosa; nei browser moderni contenuto in lineanon verrà visualizzato.

Answer 2

diretto work-around per il debugging

Ho un CSS livello di debug che dà un outline di elementi con codice non valido o obsolete. Sebbene non sia esattamente una risposta, qualcuno potrebbe trovarlo utile poiché stavo cercando di trovare un modo per garantire visivamente che qualsiasi contenuto incorporato in un iframe avesse un attributo/valore . Questo work-around utilizza un selettore di pari livello e funziona abbastanza bene.

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

diretto Styling utilizzando terzo elemento

Se stai cercando di posizione rispetto al iframe mio prossimo consiglio sarebbe quello di impostare la posizione padre del iframe per position: relative; e poi impostare position: absolute; su un terzo elemento per abbinare il rendering dell'iframe. Infine, è possibile applicare lo ::after a quel terzo elemento.