pseudo-element (दुहेरी कोलन ::) एखाद्या घटकाच्या विशिष्ट भागाला स्टाइल देते, किंवा असे कंटेंट व्यक्त करते जो HTML मध्ये नाही — अतिरिक्त मार्कअप जोडल्याशिवाय।
हे महत्वाचे का आहे
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> आवश्यक नाहीत.
ते मार्कअप सिमॅन्टिक ठेवते आणि समृद्ध दृश्य तपशील सक्षम करते, आणि ते स्वच्छ, देखभाल करण्यायोग्य स्टाइलिंगचा आधार आहेत.