Is it somehow possible to style an iframes before/after pseudo-element?

Question

As the title says, is there a way to style an iframes pseudo before/after? Without wrapping the iframe with another div, or else?`

I tried to style it like any other element, but no success:

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/

Update

A known workaround is to add the before/after to an element in the source file: http://fiddle.jshell.net/ppRqm/2/

But sometimes you've no access to the source-file.

Answer 1

I am not sure but I think it isn't possible. Or the logic behind an iframe makes it imposible to achieve.

As you know, pseudo-elements are added to its container, if you do that with an iframe, pseudo-elements would be added inside the iframe. But, and here's the problem, the iframe content, the inline content, will just load if the browser doesn't support iframes.

This means that this:

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

And adding pseudo-elements, will do the same thing; on modern browsers inline content wouldn't be displayed.

Answer 2

Direct Work-Around for Debugging Purposes

I have a debugging CSS tier that gives an outline to elements with invalid or obsolete code. While not exactly an answer someone may find it helpful as I was trying to find a way to visually ensure that any content embedded with an iframe had an allowfullscreen="true" attribute/value. This work-around uses a sibling selector and it works well-enough.

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

Direct Styling using Third Element

If you're looking to position relative to the iframe my next recommendation would be to set the iframe's parent position to position: relative; and then set position: absolute; on a third element to match the iframe's rendering. Lastly you could finally apply the ::after on that third element.