::before र ::after जस्ता pseudo-elements के हुन्?

Question

Accepted Answer

एक **pseudo-element** (डबल कोलन `::`) एलिमेन्टको विशिष्ट *भाग*लाई स्टाइल गर्छ, वा **कन्टेन्ट उत्पन्न गर्छ** जो HTML मा छैन — अतिरिक्त मार्कअप थपेर। ## ::before र ::after — जेनरेट गरिएको कन्टेन्ट ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` प्रपर्टी अनिवार्य छ — यो बिना, pseudo-element रेन्डर हुँदैन। जेनरेट गरिएको कन्टेन्ट एलिमेन्टको एकदम सुरुमा (`::before`) वा अन्तमा (`::after`) एक बाल हो। ## अतिरिक्त divs बिना सजावटी आकृतिहरू ```css .tooltip::after { content: ""; /* empty but present → creates a box */ position: absolute; border: 8px solid transparent; border-top-color: black; /* a CSS triangle (tooltip arrow) */ } ``` यो क्लासिक प्रयोग हो: तीरहरू, ब्याजहरू, ओभरलेहरू, सजावटी लाइनहरू खिच्नु — HTML लाई विशुद्ध दृश्य एलिमेन्टहरू मुक्त राख्नु। ## अन्य pseudo-elements (एलिमेन्टको भागलाई स्टाइल गर्नुहोस्) ```css p::first-line { font-weight: bold; } /* the first rendered line */ p::first-letter { font-size: 3em; } /* drop cap */ ::selection { background: yellow; } /* highlighted/selected text */ input::placeholder { color: gray; } /* placeholder text */ ``` ## एक बनाम दुई कोलन ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` CSS3 ले `::` परिचय गरायो pseudo-elements लाई pseudo-classes (ब्राउजरहरूले अझै पनि पुरानो वाहरूमा एकल कोलन स्वीकार गर्छन् अनुकूलताको लागि, तर `::` प्रयोग गर्नुहोस्) बाट छुट्याउन। ## पहुँचयोग्यता नोट जेनरेट गरिएको `content` केही स्क्रीन रिडर्सद्वारा पढिन्छ — अत्यावश्यक जानकारी केवल `::before`/`::after` मा राख्नुहोस् (सजावटको लागि प्रयोग गर्नुहोस्), र सजावटी आइकनहरू पहुँचयोग्यता ट्री बाहिर राख्नुको लागि सबै भन्दा राम्रो छ। ## यो किन महत्त्वपूर्ण छ Pseudo-elements ले तपाईलाई आइकनहरू, सजावटी आकृतिहरू (तीरहरू, विभाजकहरू), ड्रप क्यापहरू, र काउन्टरहरू विशुद्ध CSS मा थप्न दिन्छ — कोनै अतिरिक्त `

`s वा ``s। तिनीहरूले मार्कअपलाई सिमान्टिक राख्छन् जबकि समृद्ध दृश्य विवरण सक्षम गर्दछन्, र तिनीहरू स्वच्छ, रक्षणीय स्टाइलिङको एक मुख्य हिस्सा हुन्।