एक pseudo-element (दोहरा कोलन ::) किसी तत्व के एक विशिष्ट हिस्से को स्टाइल करता है, या सामग्री उत्पन्न करता है जो HTML में नहीं है — अतिरिक्त मार्कअप जोड़े बिना।
::before और ::after — उत्पन्न सामग्री
css
{
: ;
}
{
: ;
}
एक 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> या <span> नहीं।
वे समशीर मार्कअप रखते हैं जबकि समृद्ध दृश्य विवरण सक्षम करते हैं, और वे स्वच्छ, रखरखाव योग्य स्टाइलिंग का एक मुख्य है।