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:
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>
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:
<!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>
h4:first-child:before { content:url(imagine.gif); }
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>
Textul din paragraf ...
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>
Paragraf cu mai multe linii
A doua linie ...
Alta linie din acelasi paragraf.
<table></tr> <td>Cell-1</td><td>Cell-2</td> </tr></table>
h3 { background-image: url("image.jpg"); }
var arr = [1, "ab", "CoursesWeb.net"]; for(var i=0; i< arr.length; i++) { alert(arr[i]); };
$arr =["k1"=>"v1", "k2"=>"v2", "k3"=>"v3"); foreach($arr AS $k => $v) { echo "<br/>". $k ." - ". $v; }
He is so kind and meek. - El este atat de amabil si bland.
Tu padre tiene un carácter muy manso. - Tatal tau are un caracter foarte bland.