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.