एक pseudo-element (डबल कोलन ::) एलिमेन्टको विशिष्ट भागलाई स्टाइल गर्छ, वा कन्टेन्ट उत्पन्न गर्छ जो HTML मा छैन — अतिरिक्त मार्कअप थपेर।
::before र ::after — जेनरेट गरिएको कन्टेन्ट
{
: ;
}
{
: ;
}
एक pseudo-element (डबल कोलन ::) एलिमेन्टको विशिष्ट भागलाई स्टाइल गर्छ, वा कन्टेन्ट उत्पन्न गर्छ जो HTML मा छैन — अतिरिक्त मार्कअप थपेर।
{
: ;
}
{
: ;
}
content प्रपर्टी अनिवार्य छ — यो बिना, pseudo-element रेन्डर हुँदैन। जेनरेट गरिएको कन्टेन्ट एलिमेन्टको एकदम सुरुमा (::before) वा अन्तमा (::after) एक बाल हो।
.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 लाई विशुद्ध दृश्य एलिमेन्टहरू मुक्त राख्नु।
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 */
.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 मा थप्न दिन्छ — कोनै अतिरिक्त <div>s वा <span>s।
तिनीहरूले मार्कअपलाई सिमान्टिक राख्छन् जबकि समृद्ध दृश्य विवरण सक्षम गर्दछन्, र तिनीहरू स्वच्छ, रक्षणीय स्टाइलिङको एक मुख्य हिस्सा हुन्।