Menu
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.
231
Styling the contents of an iframe is just like styling any other web page. But, you must have access to edit the page. If you can't edit the page (for example, it's on another site).
The ::before pseudo-element can be used to insert some content before the content of an element.
In CSS2. 1, an element can only have at most one of any kind of pseudo-element at any time. (This means an element can have both a :before and an :after pseudo-element — it just cannot have more than one of each kind.)
In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.
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.
81
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
