A pseudo-element (dy pikë ::) stiliza një pjesë të caktuar të një elementi, ose gjeneron përmbajtje që nuk është në HTML — pa shtuar shënimet shtesë.
::before dhe ::after — përmbajtje e gjeneruar
css
{
: ;
}
{
: ;
}
A pseudo-element (dy pikë ::) stiliza një pjesë të caktuar të një elementi, ose gjeneron përmbajtje që nuk është në HTML — pa shtuar shënimet shtesë.
{
: ;
}
{
: ;
}
Proprieteti content është i detyrueshëm — pa të, pseudo-elementi nuk paraqitet. Përmbajtja e gjeneruar është fëmijë në fillimet (::before) ose në fund (::after) të elementit.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Kjo është përdorimi klasik: vizatim i shigjetave, badge-ish, mbulesash, linjash dekorative — duke mbajtur HTML-in të pastër nga elementet thjesht-vizuele.
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 prezantoi :: për të dalluar pseudo-elementet nga pseudo-klasat (shfletuesit ende pranojnë pikën e vetme në të vjetrën për pajtueshmëri, por përdorin ::).
Përmbajtja e gjeneruar content lexohet nga disa lexues ekrani — mos vendosni informacione të nevojshme vetëm në ::before/::after (përdoreni atë për dekorim), dhe ikonat dekorative janë më mirë të lihen jashtë pemës të aksesibilitetit.
Pseudo-elementet ju lejojnë të shtoni ikona, forma dekorative (shigjeta, ndarës), kapucina të rëndësisë dhe numërues thjesht në CSS — pa <div>-ë ose <span>-ë shtesë.
Ato ruajnë markimin semantik ndërsa mundësojnë detale të pasura vizuale, dhe janë një kënd i bazës i stilizimit të pastër dhe të mirëmbajtshëm.