जावास्क्रिप्ट सीएसएस के बाद

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

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

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

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

CSS छद्म तत्व

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

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

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

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

ऐसा इसलिए है क्योंकि संकेतन कोलन का उपयोग छद्म-वर्ग प्लेसहोल्डर को अलग करने के लिए किया जाता है। एक वेब पेज अक्सर इस तत्व का उपयोग पैराग्राफ से पहले कुछ टेक्स्ट जोड़ने के लिए किया जाता है

छद्म तत्व से पहले :: का सिंटैक्स होता है: ..

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

यहां सामने के मुख्य घटक हैं:: छद्म तत्व:

  • चयनकर्ता > चयनकर्ता को संदर्भित करता है कि :: पहले लागू किया जाना चाहिए, इसलिए यदि आप प्रत्येक "एक" टैग से पहले एक :: तत्व लागू करना चाहते हैं, तो आपका चयनकर्ता "एक" होगा। या यदि वह टी के साथ प्रत्येक तत्व से पहले तत्व से पहले एक :: लागू करना चाहता है वह वर्ग का नाम "लिंक" है, आप ".link" चयनकर्ता का उपयोग करेंगे। li>
  • सीएसएस नियम वे नियम हैं जिन्हें चयनकर्ता के सामने लागू किया जाना चाहिए।

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

यह प्रदर्शित करने के लिए एक उदाहरण लेते हैं कि कैसे :: छद्म-तत्व के काम करने से पहले।

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

हमारा कोड रिटर्न:

Capture d ` Screen 2020 से 12 09 08 00 16

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

सामग्री: "Ôîó";

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

विशेषता "सामग्री" का मान हो सकता है:.

आप सामग्री विशेषता में एक HTML तत्व सम्मिलित नहीं कर सकते हैं। वेब पेज पर एक तत्व। जैसे :: चयनकर्ता से पहले, बाद में :: अक्सर टेक्स्ट के लिंक या पैराग्राफ के साथ प्रयोग किया जाता है।

द: : वाक्य रचना के बाद वाक्य रचना के समान है :: छद्म तत्व से पहले। :: समान मूल्यों के बाद स्वीकार करता है "सामग्री" विशेषता के लिए हमने पहले चर्चा की थी

:: CSS उदाहरण के बाद

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

हमारे लेबल के बाद हम एक टेक्स्ट चाहते हैं सामग्री के साथ प्रदर्शित होने के लिए बॉक्स यह पृष्ठ हमारा बेक किया हुआ माल मेनू है। ("यह" शब्द के पहले सफेद स्थान पर ध्यान दें।) हमारे बॉक्स में एक नारंगी HTML पृष्ठभूमि रंग होना चाहिए।

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

हमारा कोड इस तरह से उत्पन्न सामग्री:

< क्लास फिगर = "wp-ब्लॉक-इमेज"> 2020 का कैप्चर 12 09 08 00 47 1