Is it possible to display an .html document , or .html fragment at CSS content?
Updated to clarify, that this SVG solution is posted based on a request made by the OP.
Here are a few samples, as an alternative, since normal HTML document doesn't get rendered (yet), where a SVG is used, using both css content and pseudo element css content property.
Note, it renders as an image/svg+xml, though the 2:nd sample show it can contain HTML elements.
div {
height: 120px;
background: gray;
}
div:before {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}
div:after {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20height%3D%2280%22%20width%3D%22160%22%3E%0D%0A%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22red%22%20%2F%3E%0D%0A%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2238%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22blue%22%20%2F%3E%0D%0A%3C%2Fsvg%3E);
}
span {
height: 120px;
background: gray;
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27200%27%20height%3D%27100%27%3E%3Ctext%20x%3D%2720%27%20y%3D%2745%27%20font-size%3D%2713px%27%3EHello%20World%20from%20SVG%3C%2Ftext%3E%3C%2Fsvg%3E);
}<div></div>
<span></span>Decoded SVG
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='100'>
<text x='20' y='45' font-size='13px'>Hello World from SVG</text>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="80" width="160">
<circle cx="40" cy="40" r="38" stroke="black" stroke-width="1" fill="red" />
<circle cx="120" cy="40" r="38" stroke="black" stroke-width="1" fill="blue" />
</svg>
Updated: Added the commented plnkr sample that also contain html/xml elements.
.content:before {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EFirst%3C%2Fstrong%3E%20item%3C%2Fli%3E%0A%20%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cem%3ESecond%3C%2Fem%3E%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3EThrid%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E%0A);
}
.content2 {
content: url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22100%25%22%20height%3D%22300%22%3E%0A%20%20%3Crect%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%20fill%3D%22blue%22%2F%3E%0A%20%20%3CforeignObject%20x%3D%2210%22%20y%3D%2210%22%20width%3D%22100%22%20height%3D%22150%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%20%20Here%20is%20a%20%3Cstrong%3Eparagraph%3C%2Fstrong%3E%20that%20requires%20%3Cem%3Eword%20wrap%3C%2Fem%3E%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%20%0A%20%20%3Ccircle%20cx%3D%22200%22%20cy%3D%22200%22%20r%3D%22100%22%20fill%3D%22red%22%20%2F%3E%0A%20%20%3CforeignObject%20x%3D%22120%22%20y%3D%22120%22%20width%3D%22180%22%20height%3D%22180%22%3E%0A%20%20%20%20%20%20%3Cdiv%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxhtml%22%3E%0A%20%20%20%20%20%20%20%20%3Cul%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cstrong%3EFirst%3C%2Fstrong%3E%20item%3C%2Fli%3E%0A%20%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3E%3Cem%3ESecond%3C%2Fem%3E%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%20%20%3Cli%3EThrid%20item%3C%2Fli%3E%0A%20%20%20%20%20%20%20%20%3C%2Ful%3E%0A%20%20%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2FforeignObject%3E%0A%3C%2Fsvg%3E%0A);
}<content class="content"></content>
<content class="content2"></content>Decoded SVG
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<rect x="10" y="10" width="100" height="150" fill="blue"/>
<foreignObject x="10" y="10" width="100" height="150">
<div xmlns="http://www.w3.org/1999/xhtml">
Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
</foreignObject>
<circle cx="200" cy="200" r="100" fill="red" />
<foreignObject x="120" y="120" width="180" height="180">
<div xmlns="http://www.w3.org/1999/xhtml">
<ul>
<li><strong>First</strong> item</li>
<li><em>Second</em> item</li>
<li>Thrid item</li>
</ul>
</div>
</foreignObject>
</svg>
MDN (erroneously?) states that it's possible...
<uri> value
content: url(http://www.example.com/test.html);
o_O Probably a misinterpretation of the Recommendation Specifications and the basic difference between URL (restrictive to certain MIME types) and URI in general.
While as you can see in this example AJAX does the job perfectly,
while content: url(someValidHTMLUri.html) does not work for text/[html, ...], as opposed to MIME types Content-transfer-encoding like application/, image/, ...
http://jsbin.com/zozetaj/1/edit?html,css,js,output
https://www.w3.org/wiki/CSS/Properties/content The value is a URI that designates an external resource (such as an image). If the user agent cannot display the resource it must either leave it out as if it were not specified or display some indication that the resource cannot be displayed.