Question

正如标题所说，有没有办法设置iframes伪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/

更新

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

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

Answer 1

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

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

这意味着：

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

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

Answer 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; on 第三个元素，用于匹配iframe的渲染。最后，您最终可以在第三个元素上应用::after。

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

2 个答案: