Pseudo-elementele permit adaugarea de stiluri CSS anumitor parti din continutul unui element HTML.
De exemplu, cand definiti un stil pentru un anumit tag HTML (sau pentru o clasa), tot continutul incadrat de acel tag va avea acelasi stil, iar daca vreti sa adaugati un stil CSS diferit primei litere sau primului rand dintr-un paragraf, se folosesc pseudo-elemente.
Sintaxa pentru utilizarea pseudo-elementelor este urmatoarea:
obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:

after - Adauga continut dupa un element HTML (nu e suportat de versiuni IE mai mici de 8)
before - Adauga continut inaintea unui element HTML (nu e suportat de versiuni IE mai mici de 8)
first-letter - Adauga un stil css primului caracter dintr-un text
first-line - Adauga un stil primei linii dintr-un text

Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte.

1. after

Pentru a adauga un anumit continut (text, imagine, sunet .wav) prin CSS, se foloseste proprietatea content si valoarea ce reprezinta continutul respectiv: text se adauga intre ghilimele, iar imagine sau sunet .wav se adauga folosind ca valoare url(adresa_fisier)
In urmatorul exemplu va fi adaugat un continut text dupa fiecare element <h4>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 1</title>
<style type="text/css">
h4:after {
content:"www.discant.ro";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>

- Rezultatul va fi cel de jos.
- Observati cum este adaugat cuvantul "www.discant.ro", imediat dupa ultimul caracter al fiecarui element <h4>, ca si cum ar face parte din textul initial, dar putand avea stil propriu.

Continutul din primul tag H4 ... www.discant.ro

Un alt text din alt element H4www.discant.ro

- In loc de selector puteti folosi si ID sau clasa.
-

2. before

Before este similar cu "after", continutul se adauga la fel, dar la inceputul elementului.
Pentru o mai mare difersitate, puteti combina pseudo-clasele cu pseudo-elemente folosind sintaxa:
obiect_css:pseudo-clasa:pseudo-element { proprietate:valoare; }
- Pseudo-clasele sunt explicate in lectia anterioara.
Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 2</title>
<style type="text/css">
h4:first-child:before {
content:"www.discant.ro- ";
color:blue;
}
</style>
</head>
<body>
<h4>Continutul din primul tag H4 ... </h4>
<h4>Un alt text din alt element H4</h4>
</body>
</html>

- De data aceasta continutul "www.discant.ro- " este adaugat imediat in fata si doar primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos:

www.discant.ro- Continutul din primul tag H4 ...

Un alt text din alt element H4

- Daca vreti sa adaugati in loc de continut text o imagine, de exemplu .gif, scrieti codul CSS astfel: h4:first-child:before { content:url(imagine.gif); }

3. first-letter

First-letter aplica un stil CSS doar primului caracter dintr-un text.
In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element definit printr-o clasa "test".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 3</title>
<style type="text/css">
.test:first-letter {
font-size:25px;
color:red;
}
</style>
</head>
<body>
<p class="test">Textul din paragraf ...</p>
<div class="test">Alt continut int-un tag DIV, dar cu aceeasi clasa.</div>
</body>
</html>

- Dupa cum puteti vedea in rezultatul de mai jos, prima litera din continutul fiecarui tag ce are class="test" este de culoare rosie si marime 25px.

Textul din paragraf ...

Alt continut int-un tag DIV, dar cu aceeasi clasa.

4. first-line

First-line aplica un stil CSS doar primei linii din continutul elementului HTML.
Studiati exemplul urmator:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Pseudo-elemente - Ex. 4</title>
<style type="text/css">
.test:first-line {
font-weight:bold;
color:blue;
}
</style>
</head>
<body>
<p class="test">Paragraf cu mai multe linii<br />
A doua linie ...<br />
Alta linie din acelasi paragraf.</p>
<div class="test">Continut pe doua linii intr-un tag DIV<br />
A doua linie din DIV.</div>
</body>
</html>

- Rezultatul este urmatorul, comform codului CSS, prima linie din fiecare element cu class="test" are textul albastru si ingrosat.

Paragraf cu mai multe linii
A doua linie ...
Alta linie din acelasi paragraf.

Continut pe doua linii intr-un tag DIV
A doua linie din DIV.