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
Sprachstörung