CSS counter in url

Question

I am interested in setting the images next to list items dynamically based on it's position. You can see below that I am using the counter feature of CSS to keep track of the list items, and that I am trying to specify an image as the list style type using the counter.

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>

What is the correct way of getting the counter to work in a url declaration? Is it even possible?

Answer 1

url cannot be compose out of multiple string

for example, this work:

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

but this doesn't work :

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

the counter has nothing to do with it

On the other hand, you could be able to do it using variables, try to take a look at LessCSS for axample.

Answer 2

counter() function can only be used for content property. URL composition, like the one you are trying to create above, is impossible in CSS.