CSS में पहले और बाद में छद्म तत्वों का उपयोग कैसे करें

छद्म तत्व अधिक उन्नत चयनकर्ताओं में से एक हैं जो सीएसएस में उपयोग के लिए उपलब्ध हैं। इन चयनकर्ताओं के पीछे मुख्य उद्देश्य किसी दिए गए वेबपेज की मूल संरचना बनाने के लिए उपयोग किए जाने वाले HTML दस्तावेज़ को बदले बिना अद्वितीय स्टाइल बनाना है।

यहाँ CSS में छद्म तत्वों का उपयोग करने का तरीका बताया गया है।

---

---

Wii . पर होमब्रे कैसे लगाएं

सामान्य छद्म तत्व

वेब डेवलपर के जीवन को आसान बनाने के लिए छद्म तत्वों की एक विस्तृत सूची उपलब्ध है। इनमें से कुछ छद्म तत्वों में शामिल हैं:

• पहले
• बाद में
• पृष्ठभूमि
• पहली पंक्ति
• प्रथम अक्षर

विशिष्ट स्थितियों में, कुछ छद्म तत्व दूसरों की तुलना में अधिक उपयुक्त साबित होंगे, लेकिन एक चीज जो स्थिर रहती है वह है किसी भी छद्म तत्व का उपयोग करने की सामान्य संरचना।

छद्म तत्व संरचना उदाहरण


selector::pseudo-element{
/* css code */
}

यद्यपि आप चयनकर्ता के रूप में HTML तत्व का उपयोग कर सकते हैं, यह अनुशंसा की जाती है कि आप अपने लेआउट में अवांछित तत्वों को लक्षित करने से बचने के लिए किसी वर्ग या आईडी का उपयोग करें। जिस तत्व, शैली या डेटा को आप वांछित स्थिति में सम्मिलित करना चाहते हैं, उसे घुंघराले ब्रेसिज़ के बीच रखा जाना चाहिए।

सूची में पहले और बाद के छद्म तत्व सबसे लोकप्रिय हैं, और यह देखते हुए कि उनका उपयोग करने के कई व्यावहारिक तरीके हैं-यह देखना मुश्किल नहीं है कि क्यों।

CSS में पहले छद्म-तत्व का उपयोग करना

हालांकि असंभव नहीं है, सीएसएस में पठनीय पाठ के साथ छवियों को ओवरले करना मुश्किल है। यह ज्यादातर इसलिए है क्योंकि छवि और पाठ एक वेबपेज पर एक ही स्थान पर होंगे।

---

---

यह अपेक्षाकृत आसान है पाठ के समूह की पृष्ठभूमि में एक छवि भेजें , लेकिन जब वह छवि बहुत अधिक चमकीली होती है तो यह उसके शीर्ष पर मौजूद टेक्स्ट पर हावी हो जाती है। इन उदाहरणों में, अगला कदम अस्पष्टता गुण का उपयोग करके छवि को कम अपारदर्शी बनाने का प्रयास करना है।

एकमात्र समस्या यह है कि चूंकि छवि और पाठ एक ही स्थिति में हैं, पाठ भी कुछ हद तक पारदर्शी हो जाएगा।

---

---

इस समस्या को हल करने के कुछ प्रभावी तरीकों में से एक पहले छद्म तत्व का उपयोग करना है।

छद्म तत्व उदाहरण से पहले का उपयोग करना


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

ऊपर दिया गया कोड नीचे दिए गए HTML लैंडिंगपेज वर्ग के साथ सामंजस्य में उपयोग करने के लिए बनाया गया है। जैसा कि ऊपर दिए गए कोड में दिखाया गया है, पहले छद्म तत्व का उपयोग करके हम छवि को लक्षित कर सकते हैं और छवि को टेक्स्ट के साथ जोड़ने से पहले उस पर अस्पष्टता संपत्ति का उपयोग कर सकते हैं।

This is the result of using the before pseudo-element
to overlay and image with readable text.

इसके परिणामस्वरूप छवि पर एक ओवरले रखा जाएगा और शीर्ष पर स्पष्ट पाठ प्रदर्शित होगा, जैसा कि नीचे दी गई छवि में दिखाया गया है:

CSS में After Pseudo-element का उपयोग करना

आफ्टर स्यूडो-एलिमेंट का एक व्यावहारिक उपयोग HTML फॉर्म के निर्माण में सहायता करना है। अधिकांश प्रपत्र फ़ील्ड के एक समूह के साथ बनाए जाते हैं, जिन्हें प्रपत्र को सफलतापूर्वक सबमिट करने के लिए डेटा की आवश्यकता होती है।

यह इंगित करने का एक तरीका है कि किसी प्रपत्र में किसी फ़ील्ड को डेटा की आवश्यकता है, इस फ़ील्ड के लिए लेबल के बाद तारांकन चिह्न लगाकर है। आफ्टर स्यूडो-एलिमेंट आपको ऐसा करने का एक व्यावहारिक तरीका प्रदान करता है।

छद्म तत्व उदाहरण के बाद का उपयोग करना


.required::after{
content: '*';
color: red;
}

ऊपर दिए गए कोड को अपने फॉर्म के CSS सेक्शन में डालने से यह सुनिश्चित हो जाएगा कि आवश्यक वर्ग वाले प्रत्येक लेबल के बाद सीधे लाल तारांकन होगा। इस उदाहरण में आफ्टर स्यूडो-एलिमेंट भी व्यावहारिक है क्योंकि यह स्टाइल को संरचना से अलग करने में मदद करता है (जो सॉफ्टवेयर विकास में हमेशा आदर्श होता है।)

विंडोज़ 10 सो नहीं जाएगा

सामग्री संपत्ति

जैसा कि उपरोक्त छद्म-तत्व उदाहरण में दिखाया गया है, सामग्री संपत्ति वह उपकरण है जिसका उपयोग वेबपृष्ठ पर नई सामग्री डालने के लिए किया जाता है। इस संपत्ति का उपयोग केवल छद्म तत्वों के पहले और बाद में किया जाता है।

यह ध्यान रखना महत्वपूर्ण है कि भले ही सामग्री संपत्ति को फ़ीड करने के लिए कोई सामग्री उपलब्ध न हो (जैसे कि ऊपर छद्म-तत्व उदाहरण से पहले), फिर भी आपको पहले या बाद के मापदंडों के भीतर सामग्री संपत्ति का उपयोग करने की आवश्यकता है छद्म तत्व उन्हें इरादा के अनुसार काम करने के लिए।

अब आप CSS में छद्म तत्वों का उपयोग कर सकते हैं

इस लेख में, आपने सीखा कि अपने सीएसएस कार्यक्रमों में छद्म तत्वों की पहचान कैसे करें और उनका उपयोग कैसे करें। आपको पहले और बाद के छद्म तत्वों से परिचित कराया गया और दोनों का उपयोग करने के व्यावहारिक तरीके दिए गए। आप यह भी देखने में सक्षम थे कि छद्म तत्वों के पहले और बाद के सफल उपयोग के लिए सामग्री संपत्ति क्यों आवश्यक है।

साझा करना साझा करना कलरव ईमेल १० सरल सीएसएस कोड उदाहरण जो आप १० मिनट में सीख सकते हैं

सीएसएस के साथ मदद चाहिए? शुरू करने के लिए इन बुनियादी सीएसएस कोड उदाहरणों को आजमाएं, फिर उन्हें अपने वेब पेजों पर लागू करें।

आगे पढ़िए संबंधित विषय

• प्रोग्रामिंग
• वेब डिजाइन
• सीएसएस

लेखक के बारे में कदीशा कीन(21 लेख प्रकाशित)

कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।

कदीशा कीन . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें