Cad iad na pseudo-eilimintí cosúil le ::before agus ::after?

Question

Accepted Answer

Is **pseudo-eilimint** (dé-dhPoint `::`)) a ghné *dhíreach* d'eilimint a stíleanna, nó **a ghineann ábhar** nach bhfuil san HTML — gan ghné bhreise a chur leis. ## ::before agus ::after — ábhar ginte ```css .note::before { content: "💡 "; /* REQUIRED — even if empty: content: "" */ } .external-link::after { content: " ↗"; /* add an icon after external links */ } ``` Is éigeantach an fheidhm `content` — gan é, ní dhéanann an pseudo-eilimint a thaispeáint. Is leanbh ag tús an eilimint atá san ábhar ginte (`::before`) nó ag deireadh (`::after`). ## Cruthanna ornáideach gan divs bhreise ```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) */ } ``` Is é seo an úsáid clasaiceach: saigheada, baistí, ifreacha, línte ornáideacha a tharraingt — ag fáil réidh leis an HTML de na heilimintí amháin-radharcach. ## Pseudo-eilimintí eile (páirt d'eilimint a stíleanna) ```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 */ ``` ## Dhá phointe nó dé-dhPoint ```css .x:hover { } /* pseudo-CLASS (state) — one colon */ .x::before { } /* pseudo-ELEMENT (a part) — two colons */ ``` Thug CSS3 isteach `::` chun pseudo-eilimintí a dhealú ó pseudo-aicmí (glacann brabhsálaí fós le pointe singil ar na sean-chinn le haghaidh comhoiriúnachta, ach úsáidtear `::`) ## Nóta inrochtana Léitear an t-ábhar ginte ag roinnt scannóirí scáileáin — ná cuir faisnéis riachtanach in `::before`/`::after` amháin (úsáid a dhéanamh ar a son d'ornáidiú), agus is fearr a fhágáil ar lár den chrann inrochtana na deilbhíní ornáideacha. ## Cén fáth a bhfuil sé tábhachtach Ligeann pseudo-eilimintí duit deilbhíní, cruthanna ornáideacha (saigheada, deighiltoirí), droichead-chinn agus méadóirí a chur leis i CSS amháin — gan `

` nó `` bhreise. Coinnítear an tseandáil séimeantach ar siad agus soláthraítear soilíochtaí radhairc saibhir, agus is dúshlánach de dhathúchán geal, inmhalartaithe iad.