Is er een manier om SVG te gebruiken als inhoud in een pseudo-element ::before of ::after

Ik wil enkele SVG-afbeeldingen voor sommige geselecteerde elementen plaatsen. Ik gebruik jQuery, maar dat is niet relevant.

Ik wil graag dat het element ::beforeis als:

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

Als ik het doe zoals hierboven weergegeven, wordt alleen de tekenreeks weergegeven. Ik heb de specificaties gecontroleerd en er lijken enkele beperkingen te zijn aan wat inhoud kan zijn. Is er een oplossing voor deze beperking? Alleen CSS contentis relevant voor mijn vraag.

Antwoord 1, autoriteit 100%

Ja dat kan! Net getest en het werkt geweldig, dit is geweldig! Het werkt nog steeds niet met html, maar wel met svg.

In mijn index.html heb ik:

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

En mijn test.svg ziet er zo uit:

<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> 

Antwoord 2, autoriteit 65%

Je kunt de SVG toevoegen als background-imagevan een lege :afterof :before.

Hier ga je:

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

Antwoord 3, autoriteit 63%

U kunt de url()CSS gebruiken functie.

   #mydiv::before {
        content: url("data:image/svg+xml; utf8, <svg ... code here</svg>");
        display: block;
        width: 22px;
        height: 10px;
        margin: 10px 5px 0 10px;
    }

Zorg ervoor dat uw SVG geen # symbolen bevat.

Antwoord 4, autoriteit 12%

<div class="author_">Lord Byron</div>

.author_ { font-family: 'Playfair Display', serif; lettergrootte: 1.25em; font-weight: 700;letter-spatiëring: 0.25em; lettertype-stijl: cursief;
 positie:relatief;
 marge-top: -0.5em;
 de kleur zwart;
 z-index:1;
 overloop verborgen;
 tekst uitlijnen:midden;
}
.auteur_:na{
  links:20px;
 marge:0 -100% 0 0;
 weergave: inline-blok;
 hoogte: 10px;
 inhoud: url(data:image/svg+xml,%0A%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22120px%22%20height%3D %2220px%22%20viewBox%3D%220%200%201200%20200%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20 %3Cpath%20stroke%3D%22zwart%22%20stroke-width%3D%223%22%20fill%3D%22geen%22%20d%3D%22M1145%2085c17%2C7%208%2C24%20-4%2C29%20 -12%2C4%20-40%2C6%20-48%2C-8%20-9%2C-15%209%2C-34%2026%2C-42%2017%2C-7%2045%2C-6 %2062%2C2%2017%2C9%2019%2C18%2020%2C27%201%2C9%200%2C29%20-27%2C52%20-28%2C23%20-52%2C34%20-102%2C33%20 -49%2C0%20-130%2C-31%20-185%2C-50%20-56%2C-18%20-74%2C-21%20-96%2C-23%20-22%2C -2%20-29%2C-2%20-56%2C7%20-27%2C8%20-44%2C17%20-44%2C17%20-13%2C5%20-15%2C7%20-40 %2C16%20-25%2C9%20-69%2C14%20-120%2C11%20-51%2C-3%20-126%2C-23%20-181%2C-32%20-54%2C -9%20-105%2C-20%20-148%2C-23%20-42%2C-3%20-71%2C1%20-104%2C5%20-34%2C5%20-65%2C15 %20-98%2C22%22%2F%3E%0A%3C%2Fsvg%3E%0A);
}
.auteur_:voor {
 rechts:20px;
 marge:0 0 0 -100%;
 weergave: inline-blok;
 hoogte: 10px;