SVG in css pseudo-class does not alway appear on print page
<p>I am creating a stylesheet for print media that includes an inline SVG as the content of an element's pseudo-class (<em>i.e.,</em> <code>::before</code>, <code>::after</code>).</p>

<p>When testing in Chrome, it seems to work just fine, but when the page is first  loaded in Firefox and Safari, the SVG element does not appear in the print preview. It then appears on all subsequent attempts.</p>

<p>I am not exactly sure what is going on, but if I had to guess, my conjecture would be: when page hasn't been cached there is latency rendering the pseudo-element that is happening concurrently to the browser creating the print page.</p>

<p>I am very curious to know why this is happening, and if there is any solution where an SVG pseudo-element can be used reliably.</p>

<p>Here is a stripped down code example. Please see if you can reproduce this issue:</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-js lang-js prettyprint-override"><code>var button = document.querySelector('button');
button.addEventListener('click', function () {
 window.print();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>div {
    text-align: center;
}
button {
    margin: 2em;
    padding: 1em 2em;
}
@media print {
    button {
        display: none;
    }
    div::before {
        content: 'Pseudo-elements';
        font-weight: bold;
        margin-top: 1em;

    }
    div::after {
        position: relative;
        display: block;
        margin-top: 1em;
        content: url("data:image/svg+xml;utf8,&lt;svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'&gt;&lt;circle cx='50' cy='50' r='50' /&gt;&lt;/svg&gt;");
    }    
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;button&gt;
     print
    &lt;/button&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>