Gibt es eine Möglichkeit, SVG als Inhalt in einem Pseudo-Element :: before oder :: after zu verwenden

Question

Ich möchte ::before verwenden, um SVG-Bilder vor einigen ausgewählten Elementen zu platzieren:

#mydiv::before {
  content: '';
  display: block;
  width: 22px;
  height: 10px;
  margin: 10px 5px 0 10px;
}

Der obige Code zeigt nur den Klartext an.
Ich habe die Spezifikation überprüft und es scheinen einige Einschränkungen zu geben, was content sein kann. Die Lösung mit der CSS content-Eigenschaft ist vorzuziehen.

Answer 1

.myDiv {
  display: flex;
  align-items: center;
}

.myDiv:before {
  display: inline-block;
  content: url(./dog.svg);
  margin-right: 15px;
  width: 10px;
}