{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 祖国的老花朵 的问题《Use the ::before generated content selector on an》','https://www.manongdao.com/q-351487.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<!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.
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:
Which is to say, they only display when the
srcof the iFrame isn't displayed. Again, this is just inference, but it seems like a plausible explanation.