Question

I am unable to get CSS generated content to work for iframe elements:

iframe::after {content: 'example';}
iframe::before {content: 'example';}

Does anyone have a solution that actually works? Thanks in advance.

Answer 1

You can use jQuery’s .content() function to access it.

$('yourIframe').contents().find('#yourItemYouWantToChange').css({
    opacity: 0,
    color: 'purple'
});

Example

Here’s an example showing me applying css to the jQuery logo typically found in the top left of the screen. Mind you, it has to be same domain/ports etc, so that’s why my example features jsfiddle in the iframe.
http://jsfiddle.net/pPqGe/