Css – way to use SVG as content in a pseudo element ::before or ::after

csspseudo-elementsvg

I want to place some SVG images before some selected elements. I am using jQuery but that is irrelevant.

I would like to have the ::before element to be as:

#mydiv::before {
  content: '<svg ... code here</svg>';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

If I do it as shown above, it just display the string. I checked the specs and there seems to be some restrictions on what content can be. Is there a work around to this restriction? Only CSS content is relevant to my question.

Best Answer

Yes you can! Just tested this and it works great, this is awesome! It still doesn't work with html, but it does with svg.

In my index.html I have: 

<div id="test" style="content: url(test.svg); width: 200px; height: 200px;"></div>

And my test.svg looks like this:

<svg xmlns="http://www.w3.org/2000/svg">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>
   <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/>
</svg>
Related Topic