Înainte de Selector

CSS ::before selectorul poate fi folosit pentru a insera conținut înainte de conținutul elementului sau elementelor selectate. Se folosește prin atașare ::before la elementul pe care urmează să fie folosit.

Să vedem câteva exemple:

p::before { 
  content: "* ";
}

span.comment::before {
  content: "Comment: ";
  color: blue;
}
<p> To infinity, and beyond!</p>
<p> I am Buzz Lightyear. I come in peace.</p>

<span class="comment">May the force be with you.</span>
<br/>
<span> Do. Or do not. There is no try.</span>

În exemplul de mai sus, vom prepanda un asterisc și un spațiu înainte de fiecare element de paragraf de pe pagină. De asemenea, pregătim „Comentariu” în albastru înainte de fiecare span element cu clasa comment.

Pseudo elemente CSS explicate selectoarele inainte si dupa

După Selector

CSS ::after selectorul poate fi folosit pentru a insera conținut după conținutul elementului sau elementelor selectate. Este folosit prin atașare ::after la elementul pe care urmează să fie folosit.

Aici sunt cateva exemple:

.buzz::after { 
  content: " - Buzz Lightyear";
  color: blue;
}

.yoda::after { 
  content: " - Yoda";
  color: green;
}
<p class="buzz"> To infinity, and beyond!</p>
<p class="yoda"> Do. Or do not. There is no try.</p>

În exemplul de mai sus, adăugăm „- Buzz Lightyear” în albastru la elementul din clasă buzz. De asemenea, adăugăm „- Yoda” în verde la elementul din clasă yoda.

1611626405 954 Pseudo elemente CSS explicate selectoarele inainte si dupa

Single-colon vs. Double-colon

Există o discuție despre modul corect de utilizare a pseudo-elementelor – stilul unic cu două puncte (:before), utilizat în specificațiile CSS 1 și 2, față de recomandarea CSS3, dublu colon (::before), în principal către „Stabiliți o discriminare între pseudo-clase și pseudo-elemente”.

Dar din motive de compatibilitate, metoda cu un singur colon este încă acceptată. Rețineți că IE8 acceptă numai notația cu un singur colon.

Mai multe informatii:

  • Manualul CSS: un ghid util pentru CSS pentru dezvoltatori
  • Cele mai bune exemple CSS și exemple CSS3