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?`

Answer 1

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.