Pseudo-elements in CSS ek keyword hota hai jo selector ke saath add hota hai, jisse element ke specific part ko style kiya jaata hai.
Pseudo-elements in CSS ke common uses:
- First letter ya first line ko style karna
- Element ke pehle ya baad content insert karna
- List item ke markers ko style karna
- User ke selected text ko style karna
- Dialog box ke background (viewbox) ko style karna
Syntax
Pseudo-elements in CSS double colon :: ke saath likhe jaate hain:
Text Pseudo-elements
Pseudo-elements in CSS me text ke specific parts ko style karne ke liye use hote hain:
::first-line→ first line ko style karta hai::first-letter→ first letter ko style karta hai
CSS Pseudo-elements for Text
::first-line
CSS Pseudo-element me ::first-line ka use text ki first line ko style karne ke liye hota hai.
Note:
- Sirf block-level elements par apply hota hai
Example:
::first-letter
CSS Pseudo-element me ::first-letter ka use text ke first letter ko style karne ke liye hota hai.
Note:
- Sirf block-level elements par apply hota hai
Example:
Pseudo-elements and HTML Classes
Pseudo-elements in CSS ko HTML classes ke saath combine kar sakte hain.
Example:
Multiple Pseudo-elements
CSS Pseudo-elements me ek hi element par multiple pseudo-elements bhi use kar sakte hain.
Example:
Pseudo-elements for Content
CSS Pseudo-elements content insert karne aur style karne ke liye bhi use hote hain:
::before→ element ke pehle content add karta hai::after→ element ke baad content add karta hai::marker→ list markers ko style karta hai::selection→ selected text ko style karta hai::backdrop→ dialog ke background ko style karta hai
::before
Example:
::after
Example:
::marker
Example:
::selection
Example:
::backdrop
Example:
Pseudo-elements in CSS element ke specific parts ko style karne aur extra content insert karne ka powerful way provide karte hain, jisse design aur UI ko aur zyada detailed aur interactive banaya ja sakta hai.
