Advanced Selectors
Pseudo-elements
::before, ::after
💡 ::before/::after invisible "extra slots" hain jo har element ke andar automatically exist karte hain — jaise ek envelope ke andar do extra invisible pockets, jinme CSS se content daal sakte ho, bina HTML modify kiye.
::before aur ::after "virtual elements" create karte hain — element ke content ke pehle/baad — content: property (mandatory, ye set kiye bina kuch dikhta nahi) unka actual content define karta hai. Decorative icons, custom bullets, tooltips, clearfix hacks ke liye bahut use hote hain.
.required-field::after {
content: " *";
color: red;
}
.quote::before {
content: "\201C"; /* opening quote mark, Unicode escape */
font-size: 2em;
}
.tooltip::before {
content: attr(data-tooltip); /* HTML attribute ki value use karo! */
position: absolute;
background: black;
color: white;
}✨
::before/::after invisible "extra slots" hain jo har element ke andar automatically exist karte hain — jaise ek envelope ke andar do extra invisible pockets, jinme CSS se content daal sakte ho, bina HTML modify kiye.
1 / 6
⚡ झट से Recap
- ::before/::after = "virtual" content, element ke andar (start/end)
- content: property mandatory hai, bina isके kuch nahi dikhega
- Custom bullets, icons, tooltips ke liye bahut common
इस page में (2 subtopics)
::first-letter poore paragraph ka pehla character target karta hai (drop-cap effects ke liye classic use). ::first-line pehli line target karta hai (dynamic — text-wrap change hone par bhi apne aap adjust hota hai).
.article p::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
margin-right: 5px;
/* Magazine-style "drop cap" effect */
}
.intro::first-line {
font-weight: bold; /* pehli line bold, chahe wrap kahi bhi ho */
}Tip: ::first-line dynamic hai — agar screen resize hone se text-wrap point badal jaaye, "first line" bhi automatically update ho jaati hai, kyunki ye actual rendered line ko target karta hai, character count ko nahi.
::selection user ke text-selection (highlight jab mouse se drag karke select karte ho) ka color customize karta hai — chhota, lekin polish add karne wala detail.
::selection {
background-color: #ffeb3b;
color: black;
}
/* User jab text select karega, default blue highlight ki jagah
yellow highlight dikhega */Tip: ::selection subtle branding touch hai — bahut sites apni brand color use karti hain default browser blue ki jagah, chhota lekin noticeable polish detail.