Is it possible to display an .html document , or .html fragment at CSS content?

by

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>

More Related Contents:

  1. Applying an ellipsis to multiline text [duplicate]
  2. Freeze the top row for an html table only (Fixed Table Header Scrolling)
  3. CSS – How to Style a Selected Radio Buttons Label?
  4. Table with fixed header and fixed column on pure css
  5. Favicon not showing up in Google Chrome [duplicate]
  6. Apply CSS styles to an element depending on its child elements [duplicate]
  7. CSS background image alt attribute
  8. 3 column layout HTML/CSS
  9. HTML5 / CSS3 Circle with Partial Border
  10. Why display grid with 100% in grid-template-columns goes out of body?
  11. Can I use non existing CSS classes?
  12. How to resize an image to fit in the browser window?
  13. Why are dashes preferred for CSS selectors / HTML attributes?
  14. Style not working for innerHTML in Angular [duplicate]
  15. How to Set Height for the Drop Down of Select box
  16. How can I prevent the scrollbar overlaying content in IE10?
  17. How to center-align one flex item and right-align another using Flexbox [duplicate]
  18. When I try to shift the image upwards using negative margin the whole container is moved upwards
  19. How to center image horizontally within a div element?
  20. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  21. What’s the difference between HTML’s and CSS’s width attribute?
  22. Why does the general-sibling combinator allow toggling pseudo-element’s content, but not the adjacent-sibling?
  23. How do I make flex box work in safari?
  24. Zebra striping a flexbox table with wrapping items
  25. Bootstrap row and col explanation
  26. Align a div to center
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Use the HTML tag as a background image instead of the CSS background-image property?
  29. Alignment of content vertically in adjacent flexbox containers
  30. Flex elements ignore percent padding in Firefox

Leave a Comment