CSS counter in url

Question

I am interested in dynamically creating images next to list items based on its position. Below you can see that I am using the CSS counter function to track list items, and that I am trying to specify the image as a list style type using a 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 to get a counter to work in a URL declaration? Is it possible?

Answer 1

URL cannot be created from multiple lines

for example this work:

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

but this does not work:

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

the counter has nothing to do with it

On the other hand, you can do this with variables, try looking at LessCSS for axample.

Answer 2

counter() function can only be used for the content property. Composing a URL like the one you are trying to create above is not possible in CSS.

Answer 3

I'm not sure what you are trying to achieve, but here is an example of code that you find useful: a code sample

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) ". "; }