Use the ::Before Generated Content Selector on an Iframe Element

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

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.

Css–selector for when a html-document is inside an iframe?

CSS is only scoped within the same document. An iframe is an entire document in its own right, and so a CSS rule that applies to the page that contains that iframe cannot apply to the page that's within that iframe.

This means that as far as HTML and CSS are concerned, html is always :root (and therefore can never be :not(:root)).

Unless you are able to transfer this CSS from the containing page to the page within the iframe (using a script for example), I don't believe there is a way using just CSS.

How can I access the contents of an iframe with JavaScript/jQuery?

I think what you are doing is subject to the same origin policy. This should be the reason why you are getting permission denied type errors.

Is there a way to select via CSS elements inside UMAP iframe?

You can get an element inside an iframe using this code:

const iframe = document.querySelector(/**iframe selector**/)
iframe.contentWindow.document.querySelector(/**element selector**/)

Then style it with js.

Related questions:

How to pick element inside iframe using document.getElementById

Get element from within an iFrame

Z-index with before pseudo-element

The ::before pseudo-element is placed inside the header element.

CSS Spec:

The :before and :after pseudo-elements interact with other boxes as if they were real elements inserted just inside their associated element.

Setting the z-index for the header element creates a new Stacking Context, so the new pseudo element you created can not float behind the header element, because it would have to go outside that Stacking Context.

I suggest that you simply precede the header element by another element, so it stacks correctly by default. Example.

---

Related Topics