सामग्री - सीएसएस-ट्रिक्स

contentसीएसएस में संपत्ति छद्म तत्वों के साथ संयोजन के रूप में प्रयोग किया जाता है ::beforeऔर ::after। इसका उपयोग वस्तुतः सामग्री डालने के लिए किया जाता है। चार प्रकार के मूल्य हो सकते हैं।

तार

.name::before ( content: "Name: "; )

फिर इस तरह एक तत्व:

 Chris 

इस तरह प्रस्तुत करना होगा:

Name: Chris

यह एक खाली स्ट्रिंग भी हो सकता है, जो आमतौर पर क्लीयरफिक्स जैसी चीजों में देखा जाता है।

काउंटर

div::before ( content: counter(my-counter); )

उस बारे में अधिक जानकारी।

छवि

div::before ( content: url(image.jpg.webp); )

यह वस्तुतः जैसे पृष्ठ पर एक छवि होगी। यह एक ढाल भी हो सकता है। ध्यान दें कि इस तरह से डालने पर आप छवि के आयामों को नहीं बदल सकते। आप सामग्री के लिए एक रिक्त स्ट्रिंग का उपयोग करके, display: blockकिसी तरह से बनाकर , उसे आकार देकर , और उपयोग करके एक छवि सम्मिलित कर सकते हैं background-image। इस तरह से आप इसे फिर से आकार दे सकते हैं background-size।

गुण

आप मान (स्ट्रिंग्स, वैसे भी) का उपयोग कर सकते हैं जो HTML में विशेषताओं से सही लिया गया है।

 60 

(data-visual-label)::before ( content: attr(data-visual-label) ": "; ) /* Classic print trick! Show URLs! */ @media (print) ( a(href)::after ( content: " (" attr(href) ") "; /* you could combine a url() in here even if you wanted */ ) )

attr()समारोह "प्रकार" बस अभी तक नहीं है, तो आप की तरह एक मूल्य के पारित नहीं हो सकता 20pxहै (बस तार), लेकिन किसी दिन!

वैकल्पिक लेख

युक्ति कहता है कि आप /वैकल्पिक पाठ को सूचीबद्ध करने के लिए सिंटैक्स में उपयोग कर सकते हैं । उदाहरण के लिए…

.el::before ( content: "⭐️" / "Alternate Text for that star"; content: "→" / ""; /* Visual only, don't read. */ )

शायद आप इसे इस्तेमाल कर सकते हैं…

 

Make Bed
Grocery Shop
Sweep Driveway

(data-alt-pseudo="Completed")::before ( content: "✅"; /* fallback */ content: "✅" / attr(data-alt-pseudo); )

अधिक जानकारी

इस तरह से सम्मिलित सामग्री वास्तव में DOM में नहीं है, इसलिए इसकी कुछ सीमाएँ हैं। उदाहरण के लिए, आप एक घटना को सीधे (केवल) एक छद्म तत्वों में संलग्न नहीं कर सकते। यह भी असंगत है कि इस तरह से डाला गया पाठ स्क्रीन पाठकों द्वारा पढ़ा जाता है या नहीं (यह आमतौर पर इन दिनों है) या यदि आप इसे चुन सकते हैं (यह आमतौर पर इन दिनों नहीं है)।

• शांत चीजें pseuedo तत्व कर सकते हैं
• छद्म तत्वों के बारे में प्रस्तुति
• एमडीएन डॉक्स

ब्राउज़र का समर्थन

यह ब्राउज़र सपोर्ट डेटा Caniuse का है, जिसमें अधिक विवरण हैं। एक संख्या इंगित करती है कि ब्राउज़र उस संस्करण और ऊपर की सुविधा का समर्थन करता है।

डेस्कटॉप

क्रोम	फ़ायर्फ़ॉक्स	अर्थात	एज	सफारी
४	२	९	१२	3.1

मोबाइल / टेबलेट

Android क्रोम	Android फ़ायरफ़ॉक्स	एंड्रॉयड	iOS सफारी
88	.५	2.1	३.२

ओपेरा के लिए, url()केवल 7+ संस्करण में समर्थित है।