सीएसएस ::पहले और ::चयनकर्ताओं के बाद:एक व्यावहारिक मार्गदर्शन कैसे करें

<पी> CSS ::before चयनकर्ता किसी चयनित तत्व से पहले सामग्री सम्मिलित करता है। सीएसएस:एक निर्दिष्ट तत्व के बाद सामग्री सम्मिलित करता है। इन चयनकर्ताओं का उपयोग आमतौर पर किसी पैराग्राफ या लिंक के पहले या बाद में टेक्स्ट जोड़ने के लिए किया जाता है। <पी> जब आप कोई वेबसाइट डिज़ाइन कर रहे हों, तो हो सकता है कि आप किसी तत्व की सामग्री प्रकट होने से पहले या बाद में उसमें सामग्री जोड़ना चाहें। उदाहरण के लिए, आप किसी सूची में प्रत्येक बुलेट बिंदु से पहले एक छवि जोड़ना चाह सकते हैं।

<पी> यहीं पर सीएसएस ::पहले और ::बाद में छद्म तत्व आते हैं। ये छद्म तत्व आपको किसी तत्व की सामग्री से पहले या बाद में सामग्री डालने की अनुमति देते हैं।

<पी> यह ट्यूटोरियल उदाहरणों के संदर्भ में चर्चा करेगा कि वेब पेज पर सामग्री को सजाने के लिए ::पहले और ::बाद में छद्म तत्वों का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के अंत तक, आप सीएसएस में ::पहले और ::बाद वाले छद्म तत्वों का उपयोग करने में विशेषज्ञ हो जाएंगे।

सीएसएस छद्म तत्व

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

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

<पी> सीएसएस छद्म तत्वों की एक विस्तृत श्रृंखला प्रदान करता है। इनमें ::पहली पंक्ति, ::पहला अक्षर, ::पहले, और ::बाद शामिल हैं। इस ट्यूटोरियल के प्रयोजनों के लिए, हम अंतिम दो पर ध्यान केंद्रित करेंगे:::पहले और ::बाद।

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

<पी> ऐसा इसलिए है क्योंकि दो कोलन नोटेशन का उपयोग छद्म-वर्गों को छद्म-तत्वों से अलग करने के लिए किया जाता है।

सीएसएस ::छद्म-तत्व से पहले

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

<पी> ::छद्म तत्व से पहले का वाक्यविन्यास है:

selector::before {
 // CSS rules
}

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

<पी> यहां ::छद्म तत्व से पहले: के मुख्य घटक हैं

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

<पी> यदि आप सीएसएस में चयनकर्ता कैसे काम करते हैं, इसके बारे में अधिक जानने में रुचि रखते हैं, तो सीएसएस चयनकर्ताओं के लिए हमारी मार्गदर्शिका पढ़ें।

<पी> आइए एक उदाहरण के माध्यम से देखें कि ::before छद्म तत्व कैसे काम करता है।

::सीएसएस उदाहरण से पहले

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

<पी> हमारा कोड लौटाता है: