是否有可能在伪元素之前/之后设置iframe样式？

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.