Pseudo-elementele CSS (Pseudo-Elements) sunt utilizate pentru a adauga efecte speciale unui selector.

Sintaxa

Sintaxa pseudo-elementelor:

selector:pseudo-element {property: value}

Clasele CSS pot fi utilizate deasemeni impreuna cu pseudo-elementele:

selector.class:pseudo-element {property: value}

Pseudo-elementul :first-line

Pseudo-elementul “first-line” este utilizat pentru a adauga stiluri speciale primei linii a unui text dintr-un selector:

p:first-line {color:#0000ff;font-variant:small-caps}

<p>Un text care se intinde pe una sau doua linii</p>

In exemplul de mai sus, browser-ul va afisa prima linie formatata conform cu pseudo elementului “first-line”. Locul in care browser-ul desparte textul in linii depinde de marimea ferestrei.

ATENTIE! Pseudo-elementul “first-line” poate fi utlizat doar cu elementele la nivel de bloc.

ATENTIE! Proprietatile urmatoare se aplica pseudo-elementului “first-line”:

• proprietati de font
• proprietati de culoare
• proprietati de fundal (background)
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Pseudo-elementul :first-letter

Pseudo-elementul “first-letter” este utilizat pentru a adauga un stil special primei litere a unui text dintrr-un selector:

p:first-letter {color:#ff0000;font-size:xx-large}

<p>Primele cuvinte dintr-un articol...</p>

ATENTIE! Pseudo-elementul “first-letter” poate fi utilizat doar cu elementele de bloc.

ATENTIE! Urmatoarele proprietati se pot aplica pseudo-elementului “first-letter”:

• proprietatilor de font
• proprietatilor de culoare
• proprietatilor de fundal
• proprietatilor margin
• proprietatilor de padding
• proprietatilor border
• text-decoration
• vertical-align (doar daca “float” este “none”)
• text-transform
• line-height
• float
• clear

Pseudo-elementele si Clasele CSS

Pseudo-elementele pot fi combinate cu clasele CSS:

p.article:first-letter {color:#ff0000}

<p class="articol">A paragraph in an article</p>

Exemplul de mai sus va determina ca prima litera a paragrafelor din clasa “articol” sa fie afisata de culoare rosie.

Pseudo-elemente multiple

Se pot combina mai multe pseudo-elemente ca in exemplul urmator:

p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}

<p>Primul cuvant al unui articol...</p>

In exemplul de mai sus prima litera din paragraf va fi rosie cu marimea de 24pt. Restul primei linii va fi albastru iar restul paragrafului in culoarea implicita.

CSS2 – Pseudo-elementul :before

Pseudo-elementul “:before” poate fi utilizat pentru a introduce ceva continut inaintea continutului unui element.

Stilul de mai jos va introduce un sunet inainte de aparitia fiecarui element <h1>:

h1:before
{
content: url(ding.wav)
}

CSS2 -Pseudo-elementul :after

Pseudo-elementul “:after” poate fi utilizat pentru a introduce ceva continut dupa continutul unui element.

Stilul de mai jos va intrtoduce un sunet dupa fiecare aparitie a elementului <h1>.

h1:after
{
content: url(ding.wav)
}

Pseudo-elemente

Browsere: IE: Internet Explorer, F: Firefox, N: Netscape.