title: How can I add a svg as content on :before pseudo element of an element?
body: <p>I am trying to use a svg inside content of <code>:before</code> pseudo element. </p>
  
  <p>For this purpose, I am following this question: <a href="https://stackoverflow.com/questions/19255296/is-there-a-way-to-use-svg-as-content-in-a-pseudo-element-before-or-after">Is there a way to use SVG as content in a pseudo element :before or :after</a> but I cannot make it work.</p>
  
  <p>I just have a simple SVG:</p>
  
  <pre><code>&lt;svg height="100" width="100"&gt;
    &lt;circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And here is what I have tried:</p>
  
  <p><strong>Example 1: Inserting the svg on the content attribute</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#square{
     background-color: green;
     width: 100px;
     height: 100px;
  }
  
  #square:before{
     display: block;
     content: url("data:image/svg+xml;charset=UTF-8,&lt;svg height='100' width='100'&gt;&lt;circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /&gt;&lt;/svg&gt;");
     background-size: 28px 28px;
     height: 28px;
     width: 28px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="square"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Example 2: With base64 encoding</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#square{
     background-color: green;
     width: 100px;
     height: 100px;
  }
  
  #square:before{
     display: block;
     content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPjwvc3ZnPg==");
     background-size: 28px 28px;
     height: 28px;
     width: 28px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="square"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, any of those examples does not work so I am sure that I am missing something.</p>
  
  <p>What I am doing wrong?</p>
  
  <p>Thanks in advance!</p>