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

正如标题所说，有没有一种方法来设计iframes伪before/after？？如果没有与其他div包装的iframe，否则`是否可以在伪元素之前/之后设置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/

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

来源

2013-06-05 yckart

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

如你所知，伪元素是加入到其容器，如果你与一个iframe，伪元素将是iframe内添加。但是，如果浏览器不支持iframe，则只会加载问题，iframe内容，内嵌内容。

这意味着，这样的：

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

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

来源

2013-06-05 16:18:24 pzin

直接变通用于调试目的

我有一个调试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-10 07:46:43 John

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

回答

相关问题