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

Posted 2023-03-05

【中文标题】是否可以在伪元素之前/之后设置 iframe 样式？

【英文标题】：Is it somehow possible to style an iframes before/after pseudo-element?

【发布时间】：2013-06-01 08:20:35

【问题描述】：

正如标题所说，有没有办法设置 iframe 伪 before/after 的样式？不用另一个 div 包裹 iframe，否则？`

我尝试像任何其他元素一样设置它的样式，但没有成功：

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/

更新

一种已知的解决方法是将之前/之后添加到源文件中的元素： http://fiddle.jshell.net/ppRqm/2/

但有时您无法访问源文件。

【问题讨论】：

小提琴链接已失效，我没有看到您在mirror of the link...上提到的解决方法...

【参考方案1】：

我不确定，但我认为这是不可能的。或者 iframe 背后的逻辑使其无法实现。

如您所知，伪元素被添加到其容器中，如果您使用 iframe 执行此操作，伪元素将被添加到 iframe 中。 但是，问题来了，如果浏览器不支持 iframe，iframe 内容，即内联内容，只会加载。

这意味着：

<iframe>
  <div>Your browser doesn't support iframes</div>
</iframe>

添加伪元素，也会做同样的事情；在现代浏览器上内嵌内容 不会显示。

【参考方案2】：

用于调试目的的直接解决方法

我有一个调试 CSS 层，它为具有无效或过时代码的元素提供 outline。虽然不完全是一个答案，但有人可能会发现它很有帮助，因为我试图找到一种方法来直观地确保嵌入 iframe 的任何内容都具有allowfullscreen="true" 属性/值。这种解决方法使用同级选择器，并且效果很好。

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;

使用第三元素的直接样式

如果您要相对于 iframe 进行定位，我的下一个建议是将 iframe 的父位置设置为 position: relative; 并 然后将 position: absolute; 设置为 第三个​​ em> 元素以匹配 iframe 的渲染。最后，您终于可以在第三个元素上应用::after。