Is there a way to use SVG as content in a pseudo element ::before or ::after

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.

Solution 1:

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> 

Solution 2:

You can add the SVG as background-image of an empty :after or :before.

Here you go:

.anchor:before {
  display: block;
  content: ' ';
  background-image: url('../images/anchor.svg');
  background-size: 28px 28px;
  height: 28px;
  width: 28px;
}