Czy można w jakiś sposób utworzyć element iframe przed/po pseudo-elemencie?

Question

Jak mówi tytuł, czy istnieje sposób na stylizowanie pseudo-ramek iframe na before/? ? Bez owijania iframe z innej div, albo `

próbowałem projektować je jak każdy inny element, ale bez powodzenia:

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/

Aktualizacja

znanym sposobem obejścia tego problemu jest dodanie elementu przed/po do elementu w pliku źródłowym: http://fiddle.jshell.net/ppRqm/2/

Czasami jednak nie masz dostępu do pliku źródłowego.

Answer 1

Nie jestem pewien, ale myślę, że to niemożliwe. Lub logika stojąca za iframe czyni to niemożliwym do osiągnięcia.

Jak wiecie, pseudo-elementy są dodany do jego kontenera, jeśli zrobić z iframe, pseudo-elementy zostaną dodane wewnątrz iframe. Ale, i tu jest problem, zawartość iframe, wbudowana zawartość, zostanie załadowana tylko wtedy, gdy przeglądarka nie obsługuje elementów iframe.

To oznacza, że ​​w ten sposób:

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

i dodanie pseudo-elementy, zrobi to samo; w nowoczesnych przeglądarkach zawartość liniowanie będzie wyświetlana.

Answer 2

bezpośrednie obejście do debugowania celów

Mam debugowania CSS Poziom że daje outline do elementów z nieprawidłowymi lub przestarzałego kodu. Chociaż nie jest to odpowiedź, którą ktoś może uznać za pomocną, ponieważ próbowałem znaleźć sposób, aby upewnić się, że każda treść osadzona w elemencie iframe ma atrybut/wartość allowfullscreen="true". To obejście wykorzystuje selektor rodzeństwa i działa dobrze.

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

bezpośrednie Styling korzystając Trzeci element

Jeśli szukasz do pozycji w stosunku do iframe moje następne zalecenie byłoby, aby ustawić pozycję dominującą iframe do position: relative; i następnie ustawić position: absolute; na zasadzie trzeci element pasujący do renderowania elementu iframe. Wreszcie możesz wreszcie zastosować ::after na tym trzecim elemencie.