एकाधिक सामग्री: attr() मान

Question

मैं अपने तत्वों में 2 चीजें प्रदर्शित करने की कोशिश कर रहा हूं; class नाम और स्वयं बनाया data-size चर। एक सफेद अंतरिक्ष से अलग।

मैं ऐसा करने से यह काम कर रहे हो सकता है:

.element:before { 
    content: attr(class); 
} 

.element:after { 
    content: attr(data-size); 
} 

लेकिन यह यह करने के लिए एक सही तरीके से की तरह लग नहीं करता है। मैंने यह करने की भी कोशिश की है:

.element:before { 
    content: attr(class data-size); 
} 

लेकिन यह भी काम नहीं करता था।

इनपुट

एचटीएमएल

<div class="element" data-size="20"></div> 

सीएसएस

.element:before { 
    content: attr(class data-size); 
} 

वांटेड उत्पादन

,210

तत्व 20

Demo here

Answer 1

सीएसएस में दो या अधिक स्ट्रिंग मूल्यों, separate them with whitespace श्रेणीबद्ध करने के लिए:

.element:before { 
    content: attr(class) ' ' attr(data-size); 
} 

ध्यान दें कि attr() कार्य करता है और उद्धरण के बीच खाली स्थान के रूप में एक ही नहीं है व्हाइटस्पेस उद्धरण के भीतर। उत्तरार्द्ध एक वास्तविक स्ट्रिंग है जिसमें एक स्पेस कैरेक्टर होता है, जो आउटपुट में दो विशेषता मानों को अलग करेगा। तीन हिस्सों के बीच सफेद जगह ऑपरेटर है जो उन्हें एक साथ जोड़ती है।