22

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

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

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/

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

4

2 回答 2

28

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

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

这意味着：

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

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

于 2013-06-05T16:18:24.307 回答
3

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

我有一个调试 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;在第三个元素上设置以匹配 iframe 的渲染。最后，您最终可以::after在第三个元素上应用。

于 2017-05-10T07:46:43.797 回答