URL'lerde CSS sayacı

Question

Resimleri dinamik olarak konumlarına göre görüntülerin yanında görüntülemek istiyorum. Aşağıda, liste öğelerini izlemek için CSS'nin sayaç özelliğini kullanıyorum ve sayacı kullanarak liste stili türü olarak bir resim belirtmeye çalıştığımı görebilirsiniz.

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> 

Tezgahın bir url bildiriminde çalışması için doğru yol nedir? Bu mümkün mü?

Answer 1

url, birden çok dize dışında oluşturulamıyor

012 örneğin

, bu iş:

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

ama bu işe yaramazsa:

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

sayaç bunun Öte yandan

ile ilgisi yoktur, sen de olabilirsin bunu değişkenler kullanarak gerçekleştirebilir, axample için LessCSS'ye göz atmayı deneyin.

Answer 2

counter() işlevi yalnızca content özelliği için kullanılabilir. Yukarıdaki şekilde oluşturmaya çalıştığınız URL yapısı, CSS'de imkansızdır. Emin değilim

Answer 3

, buradan elde etmeye çalışıyor, ancak ne bu konuda yararlı sakıncası örnek kod: 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) ". "; 
}