X'inhuma pseudo-elements bħal ::before u ::after?

Question

Accepted Answer

**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 ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` 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. ## Forom dekorattivi mingħajr div ekstra ```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) */ } ``` 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. ## Pseudo-elements oħrajn (stili parti ta' element) ```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 */ ``` ## Qoton wieħed vs żewg qoton ```css .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 `::`). ## Nota ta' Aċċessibilità 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à. ## Għaliex dan importante Il-pseudo-elements jippermettulek iżżid ikonji, forom dekorattivi (flesċ, separaturi), drop caps, u counters purament f'CSS — l-ebda `

` jew `` ekstra meħtieġ. Jiġḥdu l-markup semantiku filwaqt li jippermettu dettalji viżwali għannieja, u huma stess tal-styling ċlippin u manutenzjoni.