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

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.

SVG URL encoder to format your own SVGs as shown here.

#test::before {
  content: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx='100' cy='50' r="40" stroke="black" stroke-width="2" fill="red"/%3E%3Cpolyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3"/%3E%3C/svg%3E ");
  width: 200px;
  height: 200px;
}
<div id="test"></div>

Leave a Comment