A pseudo-element (njia mara mbili ::) inaanisha sehemu mahususi ya kipengele, au kuzalisha maudhui ambayo hayajazama HTML — bila kuongeza markup ya ziada.
::before na ::after — maudhui yaliyozalishwa
css
{
: ;
}
{
: ;
}
A pseudo-element (njia mara mbili ::) inaanisha sehemu mahususi ya kipengele, au kuzalisha maudhui ambayo hayajazama HTML — bila kuongeza markup ya ziada.
{
: ;
}
{
: ;
}
Sifa ya content ni lazima — bila hiyo, pseudo-element haisomi. Maudhui yaliyozalishwa ni mtoto mwanzoni kabisa (::before) au mwisho (::after) wa kipengele.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Hii ndiyo matumizi ya kawaida: kuchora mishale, badge, overlays, mistari ya kubaini — kuweka HTML safi kutoka kwa elementi za kina tu.
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 ilianzisha :: ili kutofautiana pseudo-elementi kutoka pseudo-class (vivinjari bado kugubali nukta moja kwenye za kale kwa ajili ya utangamano, lakini kutumia ::).
Maudhui yaliyozalishwa content husomwa na baadhi ya wasomaji wa skrini — usiweke habari muhimu tu katika ::before/::after (tumia kwa kubaini), na ikoni za kubaini ni nzuri kusaini nje ya mti wa upatikanaji.
Pseudo-elementi hukuruhusu kuongeza aikona, maumbo ya kubaini (mishale, kigawanyaji), inisheeli na kaunita katika CSS tu — hakuna <div>-za ziada au <span>-za.
Wanabaki HTML ya kifahari wakati wakiwezesha maelezo mazuri ya kina, na wao ni msingi wa mtindo safi na inayoweza kuendelea.
Maktaba ya maswali ya mahojiano ya IT yenye majibu ya kina — kutoka Junior hadi Senior.
Changia