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:


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:"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.
-

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:"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 si 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); }

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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
viviĆ³ vivido viviendo
Estoy viviendo aquĆ­.
- Traiesc /Locuiesc aici.
Pseudo-elemente

Last accessed pages

  1. Cursuri limba engleza gratuite si lectii online (1272)
  2. Articolul din limba engleza - The article (774)
  3. Backgammon (684)
  4. Gramatica limbii engleze - Prezentare Generala (2488)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1393)

Popular pages this month

  1. Bubbles3 (3188)
  2. Gramatica limbii engleze - Prezentare Generala (2485)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2253)
  4. Butterfly Kyodai (2022)
  5. Zuma Deluxe (1953)