Menene pseudo-elements kamar ::before da ::after?

Question

IT Interview Practice · Accepted Answer

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 .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` 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. ## Siffofi masu kauri ba tare da da divs ba ```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) */ } ``` Han shine amfani na tsohon zamani: zane kibiya, abun sanyi, rufaffiyar gida, jinya masu kauri — kiyaye HTML daga abubuwan gida-gida kawai. ## Wasu pseudo-elements (sassauta sassa na jadawali) ```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 */ ``` ## Daya ko biyun baka-baki ```css .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 `::`) ## Shawarar ikin ciki 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. ## Me yasa yana da mahimmanci 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 `

` ko ``. Suna kiyaye alamomin kauri yayin ba da damar cikakken baiwa biyun, kuma sune abin da ake buƙata na tsarkacin, mai karfi sassauta.

::before da ::after — samar da abun ciki

Siffofi masu kauri ba tare da da divs ba

Wasu pseudo-elements (sassauta sassa na jadawali)

Daya ko biyun baka-baki

Shawarar ikin ciki

Me yasa yana da mahimmanci

Tambayoyi masu alaƙa