moin,

Meine Absicht:
Ich möchte über dynamisch nummerierte CSS-Elemente durch @counter-style jeweils ein SVG einbinden. Ein Beispiel aus einem Beitrag Wie mit CSS einen teil statisch, verschachtelter DIV-Struktur ansprechen? - Erweiterte Frage (mit anderen Icons) habe ich aufgegriffen und angepasst.

Beispiel:

@counter-style counterStyle {
	system: fixed;
	symbols: url( 'data:image/svg+xml;charset=UTF-8,<svg …>…</svg>' url( '…' ) … );
}

Mein Problem:
In mein Beispiel lässt sich keinerlei SVG mit symbols-Property darstellen 😕. Obwohl es auf W3.org im Artikel css-counter-styles-3 alphabetic-system möglich sein ist…

@counter-style go
 {
  system: alphabetic;
  symbols: url(white.svg) url(black.svg);
  suffix: " ";
}

…bei mir auf jeden Fall nicht 😕.

Neben Bemerkung:
Die SVGs in der url()-Value an sich kann man nicht ändern (habe ich gelesen und ausprobiert), nur über CSS. Fals es diesbezüglich in Kontext meiner Frage eine Lösung gibt, habe ich sie nicht gefunden 😕.
Ich habe die Skalierung und Farbe der jeweiligen SVG Icons mit mask und background-image innerhalb :after leider statisch nicht dynamisch gelöst. Allerdings kann ich dadurch mit diesem Pseudo-Element :after nicht mehr weiter arbeiten. Die dynamische Numerierung habe ich dann mit :before gelöst 😕.

lgmb