Contador de CSS em url - html, css

Estou interessado em definir as imagens ao lado delistar itens dinamicamente com base em sua posição. Você pode ver abaixo que estou usando o recurso de contador do CSS para acompanhar os itens da lista e que estou tentando especificar uma imagem como o tipo de estilo de lista usando o contador.

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>

Qual é a maneira correta de fazer com que o contador funcione em uma declaração de URL? Isso é possível?

Respostas:

o URL não pode ser composto de várias seqüências

por exemplo, este trabalho:

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

mas isso não funciona:

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

o balcão não tem nada a ver com isso

Por outro lado, você pode fazê-lo usando variáveis, tente dar uma olhada no LessCSS para obter uma amostra.

counter() A função só pode ser usada para content propriedade. A composição do URL, como a que você está tentando criar acima, é impossível no CSS.

Não sei ao certo o que você está tentando alcançar, mas aqui está o código de exemplo que você considera útil: Código de amostra

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