Pseudo-element (qoton doppju ::) jagħqu stil fuq parti speċifika ta' element, jew jiġeneraw kontenut li mhuwiex fl-HTML — bla ma jżidu markup ekstra.
Għaliex dan importante
{
: ;
}
{
: ;
}
Pseudo-element (qoton doppju ::) jagħqu stil fuq parti speċifika ta' element, jew jiġeneraw kontenut li mhuwiex fl-HTML — bla ma jżidu markup ekstra.
{
: ;
}
{
: ;
}
Il-proprjetà content hija mandatorja — mingħajriha, il-pseudo-element mhu jidher. Il-kontenut iġġenerat huwa iben fil-ħin tal-awwal (::before) jew tal-aħħar (::after) tal-element.
.tooltip::after {
content: ""; /* empty but present → creates a box */
position: absolute;
border: 8px solid transparent;
border-top-color: black; /* a CSS triangle (tooltip arrow) */
}
Din hija l-użu klassiku: tikklok il-flesċ, il-badges, il-overlays, il-linji dekorattivi — ifiċċ l-HTML iniċċ mil-elementi purament viżwali.
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 introduċa :: biex tiddistingwi l-pseudo-elements minn pseudo-classes (il-browsers xorta jaccettaw qoton wieħed fuq dawk il-qodma għall-kompatibilità, iżda użu ::).
Il-kontenut content iġġenerat jinqara minn xi screen readers — tpoġġi l-informazzjoni essenzjali biss f' ::before/::after (uża għall-dekorazjone), u l-ikoni dekorattivi huma l-aħjar li jitfegħu mill-irbat ta' aċċessibilità.
Il-pseudo-elements jippermettulek iżżid ikonji, forom dekorattivi (flesċ, separaturi), drop caps, u counters purament f'CSS — l-ebda <div> jew <span> ekstra meħtieġ.
Jiġḥdu l-markup semantiku filwaqt li jippermettu dettalji viżwali għannieja, u huma stess tal-styling ċlippin u manutenzjoni.