CSS ::before और ::after सिलेक्टर्स: एक व्यावहारिक मार्गदर्शिका

CSS ::before सिलेक्टर किसी चयनित एलिमेंट से पहले कंटेंट इन्सर्ट करता है। CSS ::after किसी निर्दिष्ट एलिमेंट के बाद कंटेंट इन्सर्ट करता है। इन सिलेक्टर्स का उपयोग आमतौर पर पैराग्राफ या लिंक के पहले या बाद में टेक्स्ट जोड़ने के लिए किया जाता है।

CSS स्यूडो-एलिमेंट्स क्या हैं?

जब आप किसी वेबसाइट को डिज़ाइन करते हैं, तो आप किसी एलिमेंट के कंटेंट के पहले या बाद में अतिरिक्त कंटेंट जोड़ना चाह सकते हैं। उदाहरण के लिए, आप एक लिस्ट में प्रत्येक बुलेट पॉइंट से पहले एक इमेज जोड़ना चाह सकते हैं।

यहीं पर CSS ::before और ::after स्यूडो-एलिमेंट्स काम आते हैं। ये स्यूडो-एलिमेंट्स आपको किसी एलिमेंट के कंटेंट के पहले या बाद में कंटेंट इन्सर्ट करने की अनुमति देते हैं।

यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि वेब पेज पर कंटेंट को सजाने के लिए ::before और ::after स्यूडो-एलिमेंट्स का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के बाद, आप CSS में ::before और ::after स्यूडो-एलिमेंट्स का उपयोग करने में विशेषज्ञ बन जाएंगे।

CSS स्यूडो-एलिमेंट्स

एक स्यूडो-एलिमेंट एक विशेष कीवर्ड है जो आपको CSS सिलेक्टर द्वारा चुने गए एलिमेंट्स के एक विशिष्ट भाग को स्टाइल करने की अनुमति देता है। हम इस आर्टिकल में स्यूडो-एलिमेंट्स को सिलेक्टर्स के रूप में संदर्भित करेंगे क्योंकि हर स्यूडो-एलिमेंट एक सिलेक्टर है।

स्यूडो-एलिमेंट्स तब उपयोगी होते हैं जब आप किसी एलिमेंट पर स्टाइल लागू करना चाहते हैं बिना उस एलिमेंट में कोई CSS क्लास या ID जोड़े। उदाहरण के लिए, यदि आप एक वेब पेज पर हर लिंक के बाद ">" ऐरो जोड़ना चाहते हैं, तो आप एक स्यूडो-एलिमेंट का उपयोग कर सकते हैं।

CSS कई प्रकार के स्यूडो-एलिमेंट्स प्रदान करता है। इनमें ::first-line, ::first-letter, ::before, और ::after शामिल हैं। इस ट्यूटोरियल के उद्देश्य के लिए, हम अंतिम दो पर ध्यान केंद्रित करेंगे: ::before और ::after।

स्यूडो-एलिमेंट्स को आमतौर पर डबल कोलन (::) का उपयोग करके दर्शाया जाता है। हालांकि CSS3 सिंगल कोलन सिंटैक्स (:) का उपयोग करके स्यूडो-एलिमेंट घोषित करने का समर्थन करता है, लेकिन टू-कॉलन नोटेशन का उपयोग करना सर्वोत्तम अभ्यास है।

ऐसा इसलिए है क्योंकि टू-कॉलन नोटेशन का उपयोग स्यूडो-क्लासेज को स्यूडो-एलिमेंट्स से अलग करने के लिए किया जाता है।

CSS ::before स्यूडो-एलिमेंट

::before स्यूडो-एलिमेंट एक वेब पेज पर किसी एलिमेंट से पहले दिखाई देने वाला कंटेंट जोड़ता है। अक्सर, इस एलिमेंट का उपयोग पैराग्राफ से पहले टेक्स्ट जोड़ने के लिए किया जाता है।

::before स्यूडो-एलिमेंट का सिंटैक्स है:

selector::before { // CSS rules }

::before सिलेक्टर को उस एलिमेंट के नाम के बाद जोड़ा जाता है जिस पर आप सिलेक्टर लागू करना चाहते हैं।

::before स्यूडो-एलिमेंट के मुख्य घटक यहां दिए गए हैं:

• selector उस सिलेक्टर को संदर्भित करता है जिस पर ::before लागू किया जाना चाहिए। इसलिए, यदि आप हर "a" टैग पर ::before एलिमेंट लागू करना चाहते हैं, तो आपका सिलेक्टर "a" होगा। या यदि आप "link" क्लास नाम वाले हर एलिमेंट से पहले ::before एलिमेंट लागू करना चाहते हैं, तो आप ".link" सिलेक्टर का उपयोग करेंगे।
• ::before ब्राउज़र को CSS नियमों के कंटेंट को सिलेक्टर से पहले जोड़ने का निर्देश देता है।
• CSS rules वे नियम हैं जिन्हें सिलेक्टर से पहले लागू किया जाना चाहिए।

यदि आप CSS में सिलेक्टर्स कैसे काम करते हैं, इसके बारे में अधिक जानने में रुचि रखते हैं, तो हमारे CSS सिलेक्टर्स गाइड को पढ़ें।

आइए एक उदाहरण के माध्यम से देखते हैं कि ::before स्यूडो-एलिमेंट कैसे काम करता है।

::before CSS उदाहरण

मान लीजिए हम एक उदाहरण वेब पेज पर हर लिंक से पहले एक लिंक इमोजी (🔗) जोड़ना चाहते हैं। हम निम्न कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

हमारा कोड यह परिणाम देता है:

हमारी HTML फ़ाइल में, हमने एक HTML <a> टैग परिभाषित किया जो करियर कर्मा होमपेज से लिंक करता है। फिर, हमारी CSS फ़ाइल में, हमने ::before स्यूडो-एलिमेंट का उपयोग करके हमारे वेब पेज पर हर <a> टैग से पहले लिंक इमोजी जोड़ा।

हमने अपनी CSS फ़ाइल में एक कंटेंट प्रॉपर्टी निर्दिष्ट करके इसे पूरा किया, जो इस तरह दिखती है:

content: "🔗";

हमारे नियम ने हमारे द्वारा बनाए गए <a> टैग की शुरुआत में एक लिंक इमोजी जोड़ा है।

"content" एट्रिब्यूट का मान हो सकता है:

• एक स्ट्रिंग, जैसे "This is a string."।
• एक काउंटर, जैसे "counter(li);"।
• एक इमेज, जैसे "url(/path/to/image.png)"।
• एक खाली स्ट्रिंग, जैसे ""।

आप content एट्रिब्यूट में HTML एलिमेंट इन्सर्ट नहीं कर सकते।

CSS ::after स्यूडो-एलिमेंट

CSS ::after स्यूडो-एलिमेंट एक वेब पेज पर किसी एलिमेंट के तुरंत बाद कंटेंट जोड़ने की अनुमति देता है। ::before सिलेक्टर की तरह, ::after का उपयोग अक्सर लिंक या टेक्स्ट के पैराग्राफ के साथ किया जाता है।

::after स्यूडो-एलिमेंट का सिंटैक्स इस प्रकार है:

selector::after { // CSS rules }

::after का सिंटैक्स ::before स्यूडो-एलिमेंट के सिंटैक्स के समान ही है। ::after उन समान मानों को स्वीकार करता है जो हमने पहले "content" एट्रिब्यूट के लिए चर्चा की थी।

::after CSS उदाहरण

मान लीजिए हम हेंसन्स बेकरी नामक एक बेकरी के लिए वेबसाइट पर एक लिंक एलिमेंट डिज़ाइन कर रहे हैं। इस लिंक को "हेंसन्स बेकरी होमपेज पर जाएं।" टेक्स्ट प्रदर्शित करना चाहिए। हमारे लिंक को 1px चौड़े सॉलिड ब्लैक बॉर्डर से घिरा होना चाहिए।

"करियर कर्मा मेरे जीवन में तब आया जब मुझे इसकी सबसे अधिक आवश्यकता थी और इसने मुझे जल्दी से एक बूटकैंप से मिलाने में मदद की। स्नातक होने के दो महीने बाद, मुझे अपने मूल्यों और जीवन में लक्ष्यों के अनुरूप अपनी ड्रीम जॉब मिल गई!"

वीनस, रॉकबॉट में सॉफ्टवेयर इंजीनियर

अपना बूटकैंप मैच खोजें

अपने लेबल के बाद, हम एक टेक्स्ट बॉक्स चाहते हैं जिसमें कंटेंट यह पेज हमारे बेक्ड गुड्स मेनू को दिखाता है। हो (ध्यान दें कि "यह" शब्द से पहले सफेद स्पेस है)। हमारे बॉक्स में नारंगी HTML बैकग्राउंड कलर होना चाहिए।

हम निम्न कोड का उपयोग करके इस कार्य को पूरा कर सकते हैं:

index.html <a href="/" class="label">हेंसन्स बेकरी होमपेज पर जाएं।</a> styles.css .label { border: 1px solid black; } .label::after { content: " यह पेज हमारे बेक्ड गुड्स मेनू को दिखाता है।"; background-color: orange; }

हमारे कोड ने इस तरह का कंटेंट जनरेट किया है:

हमारे कोड में, हमने <a> टैग का उपयोग करके अपने होमपेज का लिंक परिभाषित किया। हमारे लिंक से जुड़ा क्लास नाम .label है।

हमारी CSS फ़ाइल में, हमने .label क्लास नाम वाले हर एलिमेंट के चारों ओर 1px चौड़ा सॉलिड ब्लैक बॉर्डर लागू किया।

फिर, हमने ::after सिलेक्टर का उपयोग करके पहले वर्णित टेक्स्ट बॉक्स बनाया। टेक्स्ट बॉक्स कंटेंट "यह पेज हमारे बेक्ड गुड्स मेनू को दिखाता है।" प्रदर्शित करता है। हमारे बॉक्स में नारंगी बैकग्राउंड है।

निष्कर्ष

::before और ::after स्यूडो-एलिमेंट्स आपको CSS नियम में आपके द्वारा चुने गए किसी एलिमेंट के विशिष्ट भाग में कंटेंट जोड़ने की अनुमति देते हैं। उदाहरण के लिए, ::before सिलेक्टर का उपयोग लिंक से पहले टेक्स्ट जोड़ने के लिए किया जा सकता है। ::after सिलेक्टर का उपयोग पैराग्राफ के बाद इमोजी जोड़ने के लिए किया जा सकता है।

इस ट्यूटोरियल ने उदाहरणों के साथ संदर्भ में, CSS में स्यूडो-एलिमेंट्स की मूल बातें और ::before और ::after स्यूडो-एलिमेंट्स का उपयोग कैसे करें, इस पर चर्चा की। अब आप एक पेशेवर वेब डिजाइनर की तरह अपने CSS कोड में ::before और ::after स्यूडो-एलिमेंट्स का उपयोग शुरू करने के लिए तैयार हैं।

शीर्ष CSS वेब डेवलपर लर्निंग संसाधनों, किताबों और कोर्सेज पर सलाह के लिए, हमारे CSS कैसे सीखें गाइड को देखें।