Licznik CSS w url

Question

Jestem zainteresowany ustawianiem zdjęć obok pozycji listy dynamicznie w oparciu o jej pozycję. Poniżej widać, że używam funkcji licznika CSS, aby śledzić elementy listy i próbuję określić obraz jako styl listy przy użyciu licznika.

ul{ 
    counter-reset:list; 
} 
li 
{ 
    counter-increment:list; 
    list-style:disc outside url("http://dummyimage.com/" counter(list) "x" counter(list) ""); 
} 
<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

Jaki jest poprawny sposób działania licznika w deklaracji adresu URL? Czy to możliwe?

Answer 1

adres URL nie może być złożony z wielu ciągów znaków

na przykład, ta praca:

url("http://dummyimage.com/10x10"); 

ale to nie działa:

url("http://dummyimage.com/" "10x10"); 

licznik nie ma nic wspólnego z nim

Z drugiej strony, można być w stanie to zrobić za pomocą zmiennych, spróbuj spojrzeć na LessCSS dla axample.

Answer 2

counter() Funkcja może być używana tylko dla właściwości content. Kompozycja URL, podobnie jak ta, którą próbujesz utworzyć powyżej, jest niemożliwa w CSS.

Answer 3

Nie jestem pewien, co chce osiągnąć, ale oto przykładowy kod, który przeszkadza znaleźć przydatne: sample code

html

<ul> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
    <li>Item</li> 
</ul> 

css

ul { counter-reset: list; } 
li { 
    counter-increment: list; 
    list-style: disc outside url("http://placekitten.com/20/20"); 
} 
li:before { 
    counter-increment: section; 
    content:"Item " counter(list) ". "; 
}