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.
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
a:hover { font-weight: bold; color: #00da01; }
var num = 12.34567; num = num.toFixed(2); alert(num); // 12.35
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES); var_export($arr);
What time is it? It is a quarter to 5. - Cat este ora? E 5 fara un sfert.
¿Qué hora es? Son las tres menos cuarto. - Cat este ora? E 3 fara un sfert.