css - 是否有可能在伪元素之前/之后设置 iframe 的样式?

标签 css iframe styling pseudo-element css-content

正如标题所说,有没有一种方法可以为 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/

更新

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

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

最佳答案

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

如您所知,伪元素被添加到它的容器中,如果您使用 iframe 这样做,伪元素将被添加到 iframe 中。 但是,问题来了,iframe 内容,内联内容,如果浏览器不支持 iframe,就会加载。

这意味着:

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

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

关于css - 是否有可能在伪元素之前/之后设置 iframe 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16943221/

相关文章:

css - div :focus being used to transition height, 点击 iframe 元素恢复过渡

iframe - ionic : External link in iframe opens in webview (embed youtube player)

javascript - jquery css - 固定菜单跳转

jquery - 我怎样才能阻止 div 在悬停在每个 div 上时发生变化?

css - 获取 CSS 计算百分比结果

javascript - 我无法使用 jquery 隐藏点击事件上的 div

WPF:如何以编程方式设置 ListView 的样式,以便所有行都具有特定的背景颜色和高度?

android - 按主题或样式更改工具栏导航图标色调或颜色

c++ - Qt 5 样式 : dynamically load qml files

css - 附加到 SCSS @mixin 的奇怪字符