A pseudo-element (biyu baka-baki ::) ya sassauta wani takaici na bajimi na jadawali, ko samar da abun ciki wanda baba a HTML — ba tare da ƙari mai sauri ba.
::before da ::after — samar da abun ciki
css
{
: ;
}
{
: ;
}
A pseudo-element (biyu baka-baki ::) ya sassauta wani takaici na bajimi na jadawali, ko samar da abun ciki wanda baba a HTML — ba tare da ƙari mai sauri ba.
{
: ;
}
{
: ;
}
Abubin content shine gadon — ba tare da shi ba, pseudo-element ba zai gabatar ba. Abun ciki wanda aka samar shai jatije a cikakken farko (::before) ko ƙarshe (::after) na jadawali.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Han shine amfani na tsohon zamani: zane kibiya, abun sanyi, rufaffiyar gida, jinya masu kauri — kiyaye HTML daga abubuwan gida-gida kawai.
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 ya kawo da :: don bambanta pseudo-elements daga pseudo-classes (bawoye sai da yake karbar baka-baki gida a tsohon wasu don haɗewa, amma yi amfani da ::)
Wakilin content ana karantawa ta masu karanta allon jiya — kada saka mahimmancin bayanin a ::before/::after kawai (yi amfani da shi na ado), da alwatin kauri masu kauri suno shine dadi a bar daga bishiyar ikin ciki.
Pseudo-elements suna ba ka damar ƙara alwatin kauri, siffofi masu kauri (kibiya, raba), karfe masu tsayi, da ƙidaya kawai a CSS — ba da ƙari <div> ko <span>.
Suna kiyaye alamomin kauri yayin ba da damar cikakken baiwa biyun, kuma sune abin da ake buƙata na tsarkacin, mai karfi sassauta.