At documentation for css content at MDN :
/* <uri> value */ content: url(http://www.example.com/test.html);
Question:
It is possible to display an image at the css content property of html element at url() value of content
.content {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}<div class="content"></div>or using content property at a pseudo element, for example ::before
.content::before {
content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=);
}<div class="content"></div>Is it possible to render an .html document , .html element at css content ?
.content {
content: url(data:text/html,abc);
}<div class="content"></div>See also CSS Generated Content Module Level 3
The
contentproperty dictates what is rendered inside the element or pseudo-element. It takes a comma separated list of URIs, followed by a space separated list of tokens. If there are multiple URIs provided, then each is tried in turn until a value which is both available and supported is found. The last value is used as a fallback if the others fail.<uri> For URIs other than URIs in the last comma separated section of the value, if the URI is available and the format is supported, then the element or pseudo-element becomes a replaced element, otherwise, the next item in the comma separated list is used, if any.
EXAMPLE 4
h1 { content: url(header/mng), url(header/png), none; }In the example above, if
header/mngwasn’t in a supported format, thenheader/pngwould have been used instead. In the example above, ifheader/pngwasn’t available either, then the<h1>element would be empty, as the last alternative is none.To make an element fallback on its contents, you have to explicitly give contents as a fallback:
EXAMPLE 5
content: url(1), url(2), url(3), contents;ISSUE 3 What happens when no formats are supported, and the author does not explicitly indicate a fallback?
ISSUE 4 Why doesn’t an element fallback to contents unless an author explicitly says so?
Update
The furthest have been able to reach, here, to embedding and displaying html document in css generated content; using approach demonstrated by @LGSon. Included css generated content within html at svg as well.
As noted by @RokoC.Buljan, the MIME type is not "text/html".
content {
content: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJ5ZXMiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MDBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDQwMCAzMDAiPgogICAgPGZvcmVpZ25PYmplY3Qgd2lkdGg9IjQwMHB4IiBoZWlnaHQ9IjMwMHB4IiAKICAgICByZXF1aXJlZEZlYXR1cmVzPSJodHRwOi8vd3d3LnczLm9yZy9UUi9TVkcxMS9mZWF0dXJlI0V4dGVuc2liaWxpdHkiPgogICAgICA8aHRtbCB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94aHRtbCI+PGhlYWQ+PHN0eWxlIHR5cGU9InRleHQvY3NzIj5jb250ZW50e2NvbnRlbnQ6dXJsKCJkYXRhOmltYWdlL3BuZztiYXNlNjQsaVZCT1J3MEtHZ29BQUFBTlNVaEVVZ0FBQVNjQUFBRERDQVlBQUFEQStOZGhBQUFBQkhOQ1NWUUlDQWdJZkFoa2lBQUFBcGxKUkVGVWVKenQxQ0VCQUNBQXdEQ2dmdzF5UWdFOEYxdUNxOCt6eHhrQU1ldDNBTUNMT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRko1Z1FrbVJPUVpFNUFramtCU2VZRUpKa1RrR1JPUUpJNUFVbm1CQ1NaRTVCa1RrQ1NPUUZKNWdRa21ST1FaRTVBa2prQlNlWUVKSmtUa0dST1FKSTVBVW5tQkNTWkU1QmtUa0NTT1FGSjVnUWttUk9RWkU1QWtqa0JTZVlFSkprVGtHUk9RSkk1QVVubUJDU1pFNUJrVGtDU09RRkpGMlBYQkNtc0t5TUpBQUFBQUVsRlRrU3VRbUNDIil9PC9zdHlsZT48L2hlYWQ+PGJvZHkgc3R5bGU9ImJvcmRlcjp0aGljayBzb2xpZCB5ZWxsb3c7YmFja2dyb3VuZDp1cmwoZGF0YTppbWFnZS9wbmc7YmFzZTY0LGlWQk9SdzBLR2dvQUFBQU5TVWhFVWdBQUFTY0FBQURCQ0FZQUFBQ05NSFpxQUFBQUJITkNTVlFJQ0FnSWZBaGtpQUFBQXBKSlJFRlVlSnp0MURFQndDQVF3TUNueW5FT0JycVQ0VTVCcHF6WmN3WWc1bnNkQVBESG5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VneUp5REpuSUFrY3dLU3pBbElNaWNneVp5QUpITUNrc3dKU0RJbklNbWNnQ1J6QXBMTUNVZ3lKeURKbklBa2N3S1N6QWxJTWljZ3laeUFKSE1Da3N3SlNESW5JTW1jZ0NSekFwTE1DVWd5SnlESm5JQWtjd0tTekFsSU1pY2d5WnlBSkhNQ2tzd0pTREluSU1tY2dDUnpBcExNQ1VpNlBEb0RBYnlDc244QUFBQUFTVVZPUks1Q1lJST0pIj48aDE+VGV4dCBnb2VzIGhlcmU8L2gxPjxpbWcgc3JjPSJncmVlbi5wbmciPjwvaW1nPjxkaWFsb2cgc3R5bGU9InRvcDoxNTBweDsiIG9wZW49InRydWUiPmNvbnRlbnQ8L2RpYWxvZz48Y29udGVudD48L2NvbnRlbnQ+PC9ib2R5PjwvaHRtbD4KICAgIDwvZm9yZWlnbk9iamVjdD4KPC9zdmc+Cg==)
}<content></content><?xml version="1.0" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="0 0 400 300">
<foreignObject width="400px" height="300px"
requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility">
<html xmlns="http://www.w3.org/1999/xhtml"><head><style type="text/css">content{content:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADDCAYAAADA+NdhAAAABHNCSVQICAgIfAhkiAAAAplJREFUeJzt1CEBACAAwDCgfw1yQgE8F1uCq8+zxxkAMet3AMCLOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJ5gQkmROQZE5AkjkBSeYEJJkTkGROQJI5AUnmBCSZE5BkTkCSOQFJF2PXBCmsKyMJAAAAAElFTkSuQmCC")}</style></head><body style="border:thick solid yellow;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAScAAADBCAYAAACNMHZqAAAABHNCSVQICAgIfAhkiAAAApJJREFUeJzt1DEBwCAQwMCnynEOBrqT4U5BpqzZcwYg5nsdAPDHnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUgyJyDJnIAkcwKSzAlIMicgyZyAJHMCkswJSDInIMmcgCRzApLMCUi6PDoDAbyCsn8AAAAASUVORK5CYII=)"><h1>Text goes here</h1><img src="green.png"></img><dialog style="top:150px;" open="true">content</dialog><content></content></body></html>
</foreignObject>
</svg>
svgis adocumentwhich can render text , yes ?contentproperty only applies to::beforeand::afterpseudo-elements.:beforeand:afterpseudo-elements". CSS Generated Content Module Level 3 might change that, but currently is only a draft not ready for implementation.