Is it somehow possible to style an iframes before/after pseudo-element?

百般思念 提交于 2019-12-05 10:46:27

问题


As the title says, is there a way to style an iframes pseudo before/after? Without wrapping the iframe with another div, or else?`

I tried to style it like any other element, but no success:

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/

Update

A known workaround is to add the before/after to an element in the source file: http://fiddle.jshell.net/ppRqm/2/

But sometimes you've no access to the source-file.


回答1:


I am not sure but I think it isn't possible. Or the logic behind an iframe makes it imposible to achieve.

As you know, pseudo-elements are added to its container, if you do that with an iframe, pseudo-elements would be added inside the iframe. But, and here's the problem, the iframe content, the inline content, will just load if the browser doesn't support iframes.

This means that this:

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

And adding pseudo-elements, will do the same thing; on modern browsers inline content wouldn't be displayed.




回答2:


Direct Work-Around for Debugging Purposes

I have a debugging CSS tier that gives an outline to elements with invalid or obsolete code. While not exactly an answer someone may find it helpful as I was trying to find a way to visually ensure that any content embedded with an iframe had an allowfullscreen="true" attribute/value. This work-around uses a sibling selector and it works well-enough.

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;
}

Direct Styling using Third Element

If you're looking to position relative to the iframe my next recommendation would be to set the iframe's parent position to position: relative; and then set position: absolute; on a third element to match the iframe's rendering. Lastly you could finally apply the ::after on that third element.



来源:https://stackoverflow.com/questions/16943221/is-it-somehow-possible-to-style-an-iframes-before-after-pseudo-element

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!