Use the ::before generated content selector on an iframe element

Question

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#test iframe {
 border: none;
 background: #333;
 width: 500px;
 height: 500px;
 overflow: hidden;
}

#test iframe:before {
 display: block;
 content: " test";
 width: 500px;
 height: 500px;
 background: url('overlay.png') no-repeat;
 position: relative;
 top: 0px;
 left: 0px;
 z-index: 999;
}
</style>
</head>

<body>

 <div id="test">
  <p><iframe></iframe></p>
 </div>

</body>
</html>

I'm trying to place an image over an iframe but for some reason the ::before selector isn't getting along with the iframe — try replacing the iframe with any other element and it works. I need the iframe to be a child of the p element.

The content of the `iframe` is a separate web-page; I don't think you can apply CSS from the parent. If you're able, you could use `body::before {/*...*/}` in the contained page, maybe? — David Thomas, Oct 24 '12 at 18:53
but im not trying to place an overlay on the content of the iframe — im trying to overlay on the iframe object itself which is why i don't think it would really matter — , Oct 24 '12 at 18:55
Any reason why you have to use the iframe:before and not just it's parent paragraph ? — Jayx, Oct 24 '12 at 19:17
because i'm going to be dealing with multiple paragraphs within the 'test' div and i only want to apply the overlay on the iframe — my reason for using the before selector to do this is because im loading additional styles on a 'permalink page' that will override the previous styles — , Oct 24 '12 at 19:22

score 4 · Answer 1 · edited May 23 '17 at 12:14

I'm not certain on this, but I'm thinking this won't display unless the user's browser doesn't support iFrames.

If you take a look at this answer, it suggests that the :before and :after pseudoelements are placed inside the parent element, which in this case is the iFrame.

Now we head over to the docs and can infer the behavior of iFrame children from this code:

<iframe src="page.html" width="300" height="300">
  <p>Your browser does not support iframes.</p>
</iframe>

Which is to say, they only display when the src of the iFrame isn't displayed. Again, this is just inference, but it seems like a plausible explanation.

Use the ::before generated content selector on an iframe element

1 Answers1

Linked