Pseudo-elements جیسے ::before اور ::after کیا ہیں?

Question

Accepted Answer

ایک **pseudo-element** (ڈبل کولن `::`) کسی عنصر کے ایک مخصوص *حصے* کو style کرتا ہے، یا **مواد تیار کرتا ہے** جو HTML میں نہیں ہے — بغیر کسی اضافی markup کے شامل کیے۔ ## ::before اور ::after — generated content ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` `content` property لازمی ہے — بغیر اس کے، pseudo-element render نہیں ہوتا۔ Generated content عنصر کے بالکل ابتدا (`::before`) یا آخر (`::after`) میں ایک child ہے۔ ## Decorative shapes بغیر اضافی divs کے ```css .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 کو خالصتاً بصری عناصر سے صاف رکھنا۔ ## دوسرے pseudo-elements (عنصر کے حصے کو style کریں) ```css 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 */ ``` ## ایک بمقابلہ دو کولن ```css .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 میں شامل کرنے دیتے ہیں — کوئی اضافی `

`s یا ``s نہیں۔ وہ markup کو semantic رکھتے ہیں جبکہ بھرپور بصری تفصیل کو فعال کرتے ہیں، اور وہ صاف، maintainable styling کا ایک طریقہ کار ہیں۔