dexblog.ro
CSS Toate proprietățile CSS

Pseudo-elemente (::before, ::after, ::placeholder) în CSS

Selectori și reguli de bază CSS2+

Creează elemente decorative virtuale în pagină fără HTML suplimentar sau stilizează părți specifice ale unui element.

Sintaxă CSS 
.badge::before { content: "★ "; }
.linie::after { content: ""; display: block; height: 2px; }
input::placeholder { color: #94a3b8; }

Ce face Pseudo-elemente (::before, ::after, ::placeholder)

Pseudo-elementele încep cu două perechi de două puncte (::) și permit stilizarea unor părți invizibile în HTML sau generarea de conținut decorativ din CSS.

Cele mai puternice sunt ::before și ::after: ele inserează un element decorativ chiar la începutul sau la sfârșitul conținutului elementului. Pentru a fi afișate, este obligatoriu să aibă proprietatea content: "" (chiar dacă este un șir gol).

Valori uzuale

Valoare Descriere
::before Inserează un conținut virtual la începutul elementului.
::after Inserează un conținut virtual la finalul elementului.
::placeholder Stilizează textul temporar din interiorul căsuțelor input.
::selection Stilizează porțiunea de text selectată cu mouse-ul de utilizator.

Exemple

Exemplul 1: Adăugarea unei linii decorative sub un titlu cu ::after

Linia este generată pur din CSS, păstrând codul HTML curat.

h2.titlu-decorat {
  position: relative;
  padding-bottom: 10px;
}
h2.titlu-decorat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50px;
  height: 4px;
  background-color: #e34f26;
  border-radius: 2px;
}

Efect vizual în browser

Sub titlul h2 apare o linie orizontală portocalie de 50px lățime și 4px grosime.

Greșeli frecvente

  • Omiterea proprietății content pe ::before sau ::after; fără content: „”, pseudo-elementul nu se randează deloc în browser.
  • Încercarea de a adăuga ::before sau ::after pe elemente vide precum sau (aceste elemente nu au conținut interior, deci nu suportă pseudo-elemente).

Comenzi înrudite