Pseudo-elementele CSS 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 utilizare pseudo-elemente:

obiect_css:pseudo-element { proprietate:valoare; }
- unde "obiect_css" este un selector, id sau clasa, iar "pseudo-element" este una din expresiile urmatoare:
Ca sa intelegeti mai bine cum functioneaza si ce fac pseudo-elementele, iata cateva exemple cu fiecare in parte.

:after

Pentru a adauga un anumit continut (text, imagine, sunet .wav) in HTML prin CSS, se foloseste proprietatea content si valoarea ce reprezinta continutul respectiv: 'textul' 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>
<html>
<head>
<title>Title</title>
<style>
h4:after {
content:'MarPlo';
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 "MarPlo", 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 ... MarPlo

Un alt text din alt element H4MarPlo

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

:before

Pseudo-elementul 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; }

Ca sa vedeti efectul, iata un exemplu aplicat cu "before" acelorasi tag-uri H4 din exemplul precedent.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
h4:first-child:before {
content:'MarPlo- ';
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 "MarPlo- " este adaugat imediat in fata, doar primului element <h4> (precizat prin 'first-child'), dupa cum puteti vedea mai jos:

MarPlo- 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); }

:first-letter

Pseudo-elementul first-letter aplica un stil CSS primului caracter dintr-un text.
- In urmatorul exemplu este aplicat un stil CSS primului caracter din continutul fiecarui element cu clasa ".test".

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.test:first-letter {
color:red;
font-size:25px;
}
</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 cu class="test" este de culoare rosie si marime 25px.

Textul din paragraf ...

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

:first-line

Pseudo-elementul First-line aplica un stil CSS primei linii din continutul elementului HTML.
- Exemplul:

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
.test:first-line {
color:blue;
font-weight:bold;
}
</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>
- Rezultat, 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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()
var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]);            // download
Ce functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger bigger
He is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grande
Él es más grande que su hermana.
- El este mai mare decat sora lui.
Pseudo-elemente CSS

Last accessed pages

  1. Curs PHP MySQL, Tutoriale si Scripturi PHP (45994)
  2. Trecut perfect si Trecutul perfect continuu - Past perfect and Continuous (34109)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (117662)
  4. Confusable words - Cuvinte confundabile - Test Engleza (1944)
  5. Curs si Tutoriale Ajax (33081)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (711)
  2. Curs HTML gratuit Tutoriale HTML5 (516)
  3. Curs si Tutoriale JavaScript (479)
  4. Curs si Tutoriale Ajax (440)
  5. Curs CSS Online Tutoriale CSS3 (429)