यूआरएल

Question

में सीएसएस काउंटर मैं अपनी स्थिति के आधार पर गतिशील रूप से सूची आइटम के बगल में छवियों को सेट करने में रूचि रखता हूं। आप नीचे देख सकते हैं कि मैं सूची आइटम का ट्रैक रखने के लिए सीएसएस की काउंटर फीचर का उपयोग कर रहा हूं, और मैं काउंटर का उपयोग करके सूची शैली प्रकार के रूप में एक छवि निर्दिष्ट करने की कोशिश कर रहा हूं।

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> 

यूआरएल घोषणा में काउंटर को काम करने का सही तरीका क्या है? क्या यह भी संभव है?

Answer 1

यूआरएल एकाधिक स्ट्रिंग

012 से बना नहीं जा सकता उदाहरण के लिए

, इस काम:

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

लेकिन यह काम नहीं करता:

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

काउंटर यह

दूसरी ओर से कोई लेना-देना नहीं है, तो आप हो सकता है चर का उपयोग करके इसे करने में सक्षम, axample के लिए LessCSS पर एक नज़र डालने का प्रयास करें।

Answer 2

counter() फ़ंक्शन का उपयोग केवल content संपत्ति के लिए किया जा सकता है। यूआरएल संरचना, जैसा कि आप ऊपर बनाने की कोशिश कर रहे हैं, सीएसएस में असंभव है।

Answer 3

मुझे यकीन है कि नहीं हूँ, आप क्या हासिल करने की कोशिश कर रहे हैं, लेकिन यहां नमूना कोड है कि आप बुरा उपयोगी पाते है: sample code

एचटीएमएल

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

सीएसएस

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