Folosirea Pseudo-Elementelor :before i :after n CSS

Ce Face Un Pseudo-Element ?
Dup cum o arat i numele, creeaz un element fals, pe care l introduce naintea coninutului sau dup coninutul elementului selectat.

Sintax Elementar
Un exemplu simplu: #exemplu:before{ content:#; } #exemplu:after{ content:#; } Elementul intit este#exemplu. Proprietatea content este foarte important. n absena acesteia, nu am putea insera nimic, pseudo-elementele devenind inutile. n acest exemplu, elementul #exemplu va avea un diez plasat naintea ( :before) coninutului su i un punct plasat dup acesta.

Precizri Referitoare La Sintax

Putem lsa proprietatea content goal: #exemplu:before{ content:; display:block; width:100px; height:100px; } ntr-o asemenea situaie, pseudo-elementul ar fi tratat ca un chenar fr coninut. Indiferent de scopul urmrit, proprietatea content trebuie folosit. Folosirea ::before n loc de :before este o modalitate prin care se difereniaz uneori ntre pseudo-elemente i pseudo-clase ( precedate de un singur : ) n CSS3. Tehnic ar fi posibil folosirea unui pseudo-element universal:

:before{ content:#; } dar ar fi inutil, pentru c am insera simbolul # naintea fiecrui element din marcaj.

Caracteristicile Con inutului Inserat

Coninutul inserat nu este vizibil n sursa paginii, doar n CSS. De asemenea, este n mod implicit un element inline. Din aceasta cauz, pentru a putea folosi proprieti cum ar fi nlimea, spaierea, trebuie s l definim explicit ca element bloc: #element:before{ content:; display:block; width:200px; height:200px; } #element:after{ content:; display:block; width:200px; height:200px; } Regulile obinuite de motenire din CSS se aplic i elementelor inserate ( cum ar fi, de exemplu, stiva de fonturi folosit pentru body ).

nainte Sau Dup Ce ?

Coninutul injectat va fi copil n relaie cu elementul intit, dar fi plasat nainte(:before) sau dup(:after) con inutul din elementul respectiv. Vom lua n considerare urmtorul cod HTML: <pclass=box>Altconinut</p> Codul CSS care introduce un pseudo-element: p.box{ width:300px; border:solid1pxblack; padding:20px;

} p.box:before{ content:"#"; border:solid1pxblack; padding:2px; margin:010px00; } Dac am accesa sursa paginii, am vedea doar elementul paragraf, cu clasa box, fr pseudoelementul :before. Rezultatul obinut:

Chenarul exterior reprezint paragraful. Bordura din jurul diezului indic marginea i amplasarea acestuia: pseudo-elementul nu este inserat naintea paragrafului , ci naintea coninutului paragrafului.

Inserarea Con inutului Non-Text

Proprietatea content poate primi ca valoare un url ctre o imagine: p:before{ content:url(imagine.jpg); } Citatele nu sunt folosite pentru proprietatea content pentru c aceasta ar fi interpretat literal, ca un simplu ir de caractere, nu o referin ctre o imagine. O alt valoare folosit poate fi o funcie n forma attr(X). Aceast funcie, potrivit specificaiilor, returneaz ca ir de caractere valoarea atributului X pentru subiectul selectorului. n exemplul urmtor, funcia attr() ia valoarea proprietii date ca argument i o folosete pentru a insera coninut text sub forma unui pseudo-element: a:after{ content:attr(href); } Codul va plasa valoarea href a fiecrui element <a> din pagin imediat dup acel element.

Funcia attr() ar putea fi folosit i pentru afiarea valorilor proprietii title sau pentru valorile de microdate.