list-item style gesucht wenn classe auf ul

[beatovich]

hallo

Kleiner Anhang

SVG kann auch Spass machen. Ich habe nun über mehrere Tage immer wieder kleine Details an der Spritemap geändert oder ergänzt, oder Icons in symbol Elmente konvertiert und sie mehrfach wiederverwendet.

Eine SVG Spritemap ist, verglichen zur Pixelkonkurrenz, viel mehr Work in Prozess.

Voraussetzung ist aber, dass man im CSS alle background-position Werte mit negativen Koordinaten angibt. So lassen sich viewboxen einfach erweitern, ohne dass man bisherige CSS Koordinaten korrigieren muss.

nur eines macht mir im Moment Kopfzerbrechen.

<span class="icon arrow"></span>

ist eigentlich der übliche Ansatz.

<ul class="icon anyicon">
  <li>item</li>
</ul>

Wie schaffe ich es, dass die Eigenschaften nun nicht auf ul angewendet werden, sondern li::before, ohne dass ich für jedes icon einen eigenen Selektor definieren muss?

Das bisherige CSS ist

	.icon::before {
		font-size:1.25em; font-size-adjust:0.3; line-height:1;
		content: "";
		width: 1em; height: 1em;
		margin:-0.2em 0.2em;
		display: inline-block;
		text-align:center;
		text-indent:0;
		background-image: url("'+_.guiSpritemapUri+'");
		background-size: 12em;
		transition:all 0.4s ease;
		background-position: 1em 0em;
	}
	a[href^="kontakt.html"]::before,
	.icon.at::before { background-position: 0em 0em; }
	.icon.menu::before { background-position: -1em 0em; }
  /* sehr viele icons mit Koordinaten */
  /* ... */
	.icon[data-before]::before { content:attr(data-before); }
	.icon[data-content]::before { content:attr(data-content); }
	a:hover::before, a:focus::before,\
	.icon:hover::before, .icon:focus::before {  transform:scale(1.4); }

Wer weiss Rat?