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.