ایک pseudo-element (ڈبل کولن ::) کسی عنصر کے ایک مخصوص حصے کو style کرتا ہے، یا مواد تیار کرتا ہے جو HTML میں نہیں ہے — بغیر کسی اضافی markup کے شامل کیے۔
::before اور ::after — generated content
css
{
: ;
}
{
: ;
}
content property لازمی ہے — بغیر اس کے، pseudo-element render نہیں ہوتا۔ Generated content عنصر کے بالکل ابتدا (::before) یا آخر (::after) میں ایک child ہے۔
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
یہ کلاسیکی استعمال ہے: arrows، badges، overlays، decorative lines بنانا — 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 کو الگ کرنے کے لیے متعارف کرایا (براؤزرز پرانے pseudo-elements پر single colon کو compatibility کے لیے قبول کرتے ہیں، لیکن ::استعمال کریں)۔
Generated content کو کچھ screen readers پڑھتے ہیں — ضروری معلومات صرف ::before/::after میں نہ رکھیں (اسے decoration کے لیے استعمال کریں)، اور decorative icons کو بہتر طریقے سے accessibility tree سے باہر رکھیں۔
Pseudo-elements آپ کو icons، decorative shapes (arrows، dividers)، drop caps، اور counters خالصتاً CSS میں شامل کرنے دیتے ہیں — کوئی اضافی <div>s یا <span>s نہیں۔
وہ markup کو semantic رکھتے ہیں جبکہ بھرپور بصری تفصیل کو فعال کرتے ہیں، اور وہ صاف، maintainable styling کا ایک طریقہ کار ہیں۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں