:: पहले / :: बाद - सीएसएस-ट्रिक्स

::beforeऔर ::afterसीएसएस में छद्म तत्वों आप उसे HTML में होने की जरूरत के बिना एक पृष्ठ पर सामग्री सम्मिलित कर सकते। हालांकि अंतिम परिणाम वास्तव में DOM में नहीं है, यह पृष्ठ पर ऐसा प्रतीत होता है जैसे यह है, और अनिवार्य रूप से इस तरह होगा:

div::before ( content: "before"; ) div::after ( content: "after"; )

 before after

एक के बाद एक का उपयोग करने के एकमात्र कारण हैं:

आप चाहते हैं कि जेनरेट की गई सामग्री एलिमेंट कंटेंट से पहले आए।
::afterसामग्री भी है "के बाद" स्रोत-क्रम में, तो यह की चोटी पर स्थिति होगी :: यदि स्वाभाविक रूप से एक-दूसरे के ऊपर रखा से पहले।

ध्यान दें कि सामग्री अभी भी उस तत्व के अंदर है जिस पर उन्हें लागू किया गया है। नामकरण की तरह लगता है कि वे आ सकते हैं, फिर जानते हैं, तत्व से पहले या बाद में, लेकिन यह अंदर की अन्य सामग्री से पहले या बाद में वास्तव में है।

सामग्री के लिए मूल्य हो सकता है:

एक स्ट्रिंग: content: "a string"; - विशेष पात्रों को यूनिकोड इकाई के रूप में विशेष रूप से एन्कोड किया जाना चाहिए। ग्लिफ़ पृष्ठ देखें।
एक छवि: सामग्री: url (/path/to/image.jpg.webp); - छवि सटीक आयामों पर डाली गई है और इसे आकार नहीं दिया जा सकता है। चूंकि ग्रेडिएंट जैसी चीजें वास्तव में छवियां हैं, एक छद्म तत्व एक ढाल हो सकता है।
कुछ नहीं: सामग्री: ""; - पृष्ठभूमि-छवियों के रूप में स्पष्ट और सम्मिलित करने के लिए उपयोगी (सेट चौड़ाई और ऊंचाई, और यहां तक कि पृष्ठभूमि के आकार के साथ आकार बदल सकते हैं)।
एक काउंटर: content: counter(li); - स्टाइलिंग सूचियों के लिए वास्तव में उपयोगी है: मार्कर साथ आता है।

ध्यान दें कि आप HTML नहीं डाल सकते हैं (कम से कम, जिसे HTML के रूप में प्रस्तुत किया जाएगा)। content: "";

: बनाम ::

प्रत्येक ब्राउज़र जो डबल कोलन का समर्थन करता है (: :) CSS3 सिंटैक्स भी सिर्फ (:) सिंटैक्स का समर्थन करता है, लेकिन IE 8 केवल एकल-कोलोन का समर्थन करता है, इसलिए अभी के लिए, सर्वश्रेष्ठ ब्राउज़र समर्थन के लिए केवल-कोलन का उपयोग करने की अनुशंसा की जाती है।

:: छद्म चयनकर्ताओं से छद्म सामग्री को अलग करने का इरादा नया प्रारूप है। यदि आपको IE 8 समर्थन की आवश्यकता नहीं है, तो डबल-कोलन का उपयोग करने के लिए स्वतंत्र महसूस करें।

सम्बंधित

::पहली पंक्ति
::पहला अक्षर
छद्म वर्ग के चयनकर्ता

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

छोटे मुद्दे:

फ़ायरफ़ॉक्स 3.5- छद्म तत्वों की पूर्ण स्थिति की अनुमति नहीं देगा।
ओपेरा 9.2 में, व्हाट्सएप को हमेशा इस छद्म तत्व के भीतर प्रदर्शित किया जाता है जैसे कि यह preपाठ है।
IE 8 उन पर z- इंडेक्स का समर्थन नहीं करता है