एक 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> नहीं।
वे समशीर मार्कअप रखते हैं जबकि समृद्ध दृश्य विवरण सक्षम करते हैं, और वे स्वच्छ, रखरखाव योग्य स्टाइलिंग का एक मुख्य है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें