CSS: SVG als content: eines Pseudo-Selektors verwenden

Wenn man vermittels eines Pseudo-Selektors wie :before oder :after mit CSS Zeichen voranstellen oder anhängen möchte, dann ist das mit content: möglich:

a:after{
  content: " >>>";
}

Allerdings funktioniert das nur mit einzelnen Zeichen – HTML wird an dieser Stelle nicht interpretiert (was ja auch nicht im Sinne der/des Erfinder/s wäre).

Was allerdings tatsächlich funktioniert, ist die Einbindung eines SVG an dieser Stelle.

SVG über Pseudo-Selektor einbinden

Dazu wandelt man erstmal das gewünschte SVG ins erforderliche Format um, zum Beispiel hier:

https://yoksel.github.io/url-encoder/

Den umgewandelten Code kann man dann im eigenen CSS verwenden.

Beispiel

Im OffCanvas-Menu einer WordPress+GeneratePress-Seite sollen die Pfeilchen zum Öffnen/Schließen der 2. Menüebene durch Plus- und Minus-Icons ersetzt werden.

Zunächst blenden wir die regulär angezeigten Pfeilchen aus:

.slideout-menu .icon-arrow{
	display:none;
}

Dann definieren wir das Plus-Icon für den geschlossenen Zustand und das Minus-Icon für den geöffneten Zustand (aria-expanded=“true“) (die Icons stammen aus FontAwesome 5):

.slideout-menu  .dropdown-menu-toggle:after {
content: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E") !important;
 }

.slideout-menu .dropdown-menu-toggle[aria-expanded="true"]:after {
 content: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg width='14' height='14' viewBox='0 0 1792 1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1344 960v-128q0-26-19-45t-45-19h-768q-26 0-45 19t-19 45v128q0 26 19 45t45 19h768q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E") !important;
}

…fertig!