Is It Somehow Possible to Style an Iframes Before/After Pseudo-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 :before/:after pseudo-elements/content reference tag name

This isn't possible with css. To my knowledge, the only way to do this would be to write out the contents by hand.

Style an iframe's wrapper div without css clip-path

You can consider a pseudo element over the iframe that you style using multiple background:

.box {  display:inline-block;  background:blue;  position:relative;}.box:before {  content:"";  position:absolute;  top:20px;  left:20px;  bottom:20px;  right:20px;  background:   /*top left corner*/    linear-gradient(to top left    ,transparent 49.8%,blue 50%) top left/30px 30px,    linear-gradient(to top left    ,transparent 49.8%,grey 50%) top left/37px 37px,    /*bottom right corner*/    linear-gradient(to bottom right,transparent 49.8%,blue 50%) bottom right/30px 30px,    linear-gradient(to bottom right,transparent 49.8%,grey 50%) bottom right/50px 50px,        /*borders*/    linear-gradient(grey,grey) top    /100% 5px,    linear-gradient(grey,grey) bottom /100% 5px,    linear-gradient(grey,grey) right  /5px 100%,    linear-gradient(grey,grey) left   /5px 100%;  background-repeat:no-repeat;}
iframe {  display:block;  margin:20px;  background:red;  border:none;}

<div class="box">     <iframe scr=""></iframe></div>

Pseudo element :after or :before not rendering on angular2 app

Pseudo elements work off content. input is an element that cannot have content, that is, it cannot host other elements or even text nodes. This means that you can neither use :before nor :after on input elements.

I'd suggest you wrap each input element in a label and apply your :before styles to that.

Use JQuery to modify CSS for content in an iFrame

You can not do any DOM manipulation using JavaScript to any cross domain iFrame! If iFrame is of the same domain than only you will be able to do that!

Check out these related questions

Can I apply CSS to the elements within an iframe?
How to apply CSS to iframe?

In short, no. You can not apply CSS to HTML that is loaded in an iframe, unless you have control over the page loaded in the iframe.

Handle the canvas element inside the iframe such as moving and scrolling automatically using javascript?

If your iframe is from another domain you're out of luck. By design the main page can not directly manipulate iframes from a different domain as that would be a huge security issue. For example a page could open in iframe to amazon.com, click "add to cart" and click "buy". Or it could monitor the forms in the iframe watching for the user's username and password as they logged in to their bank. That is why if the child and parent pages are not on the same domain you can not access the child from the parent (nor vice-versa)

So first you need to answer the question: Is your iframe contents from the same domain?

If your iframe is from the same domain then you need to wait for the iframe to load before trying to access its content.

<!-- main.html -->
<body>
  <iframe id="childFrame"></iframe>
</body>
<script>
const iframe = document.getElementById("childFrame");
iframe.onload = run;
iframe.src="child.html";

function run() {
  const childDocument = iframe.contentWindow.document;
  const canvas = childDocument.getElementById("map-canvas");
  canvas.addEventListener('click', function (e) {
    console.log('#### DEBUG EVENT: ', e);
  });    
}
</script>

<!-- child.html -->
<p>
  click in side rect
</p>
<canvas id="map-canvas" width="200" height="50" style="border: 1px solid black"></canvas>

example

If your iframe is from a different domain then the only solution I know if is if the creator of the content of that iframe offers an API to manipulate the contents of the iframe. For example Google maps offers an API to manipulate maps. If the page you're trying to display does not offer an API or they do but it doesn't do what you need then there is no solution.

CSS class applied before internal CSS class and not affecting SemanticUI button

It seems Semantic UI's selector has a higher specificity than yours, as it's selector is .ui.button it has two classes being selected, in contrast your selector is only one class, thus, less specific
than the one from Semantic UI's stylesheet, try adding another class, id, or tag being more specific to that element so that your style applies correctly.

So for example, if semantic ui says .ui.button { } you can try .ui.button._31HHf.... { }

[edit]

For React with CSS Modules, we can combine classes with the following:

import styles from './index.module.css';
import cx from 'classnames';
...

      <Button className={cx(
        styles.ui,
        styles.button,
        styles.mainButton
      )}>LEARN MORE</Button>

Is It Somehow Possible to Style an Iframes Before/After Pseudo-Element