Pseudo-elementele CSS- Curs CSS

Pseudo-elemente CSS

Ce sunt pseudo-elementele

Pseudo-elementele CSS permit stilizarea unor părți specifice ale unui element sau adăugarea de conținut decorativ, fără a modifica structura HTML. Se scriu cu două puncte (::) și sunt utile pentru efecte vizuale, tipografie și interacțiuni subtile.

Categorii de pseudo-elemente CSS

Pseudo-elementele CSS pot fi grupate în funcție de rolul lor în stilizarea conținutului. Mai jos sunt cele mai cunoscute și utilizate:

• Decorative:
  • ::before — adaugă conținut înaintea conținutului real al elementului
  • ::after — adaugă conținut după conținutul real al elementului
• Tipografice:
  • ::first-letter — stilizează prima literă dintr-un bloc de text
  • ::first-line — stilizează prima linie dintr-un paragraf
• Formulare și interacțiune:
  • ::placeholder — stilizează textul de tip placeholder dintr-un input
  • ::selection — stilizează textul selectat de utilizator

Toate pseudo-elementele se scriu cu două puncte (::), conform standardului CSS3, pentru a le diferenția de pseudoclasele care folosesc un singur punct (:).

Lista completă a pseudo-elementelor CSS

Mai jos sunt toate pseudo-elementele definite în specificațiile CSS, organizate alfabetic:

• A
  • ::after
• B
  • ::backdrop
  • ::before
• C
  • ::column
  • ::checkmark
  • ::cue și ::cue()
• D
  • ::details-content
• F
  • ::file-selector-button
  • ::first-letter
  • ::first-line
• G
  • ::grammar-error
• H
  • ::highlight()
• M
  • ::marker
• P
  • ::part()
  • ::picker()
  • ::picker-icon
  • ::placeholder
• S
  • ::scroll-button()
  • ::scroll-marker
  • ::scroll-marker-group
  • ::selection
  • ::slotted()
  • ::spelling-error
• T
  • ::target-text
• V
  • ::view-transition
  • ::view-transition-image-pair()
  • ::view-transition-group()
  • ::view-transition-new()
  • ::view-transition-old()

Unele dintre aceste pseudo-elemente sunt experimentale sau au suport limitat în browsere. Recomand verificarea compatibilității pe Can I use înainte de utilizare în producție.

Pseudo-elementele CSS prezentate mai jos sunt cele mai frecvent utilizate în dezvoltarea web modernă. Ele permit manipularea și stilizarea unor părți specifice ale elementelor HTML, fără a interveni direct în structură, oferind astfel un control avansat asupra prezentării vizuale și a interfeței utilizator.

::before

Descriere: Adaugă conținut înaintea conținutului real al unui element. Este folosit pentru decorare, iconițe, marcaje sau efecte vizuale.

Utilizare: Se aplică pe elemente care pot conține text și necesită proprietatea content în CSS pentru a funcționa.

Compatibilitate: Suportat pe toate browserele moderne.

Exemplu: Adaugă un emoji înaintea unui titlu.

::after

Descriere: Pseudo-elementul ::after inserează conținut imediat după conținutul real al unui element. Este utilizat frecvent pentru decorare, adăugarea de simboluri, iconițe sau elemente vizuale suplimentare.

Utilizare: Se aplică pe elemente care pot conține text și necesită proprietatea content în CSS pentru a funcționa. Poate fi combinat cu alte proprietăți CSS pentru a crea efecte complexe.

Compatibilitate: Suportat pe toate browserele moderne, inclusiv Chrome, Firefox, Edge și Safari.

Exemplu: Adaugă un simbol ✔️ după un paragraf.

::first-letter

Descriere: Pseudo-elementul ::first-letter permite aplicarea de stiluri doar asupra primei litere dintr-un bloc de text. Este util pentru efecte tipografice, cum ar fi litere mari de început în articole, bloguri sau citate.

Utilizare: Se aplică pe elemente de tip bloc (ex. <p>, <div>) și poate fi combinat cu proprietăți precum font-size, color, float, font-weight.

Compatibilitate: Suportat pe toate browserele moderne. Nu funcționează pe elemente inline.

Exemplu: Prima literă din paragraf este stilizată diferit.

::first-line

Descriere: Pseudo-elementul ::first-line permite aplicarea de stiluri doar asupra primei linii vizibile dintr-un bloc de text. Este util pentru evidențierea introducerii unui paragraf sau pentru efecte tipografice subtile.

Utilizare: Se aplică pe elemente de tip bloc (ex. <p>, <div>) și poate fi combinat cu proprietăți precum font-style, font-weight, color, letter-spacing, word-spacing, text-decoration.

Compatibilitate: Suportat pe toate browserele moderne. Nu funcționează pe elemente inline și nu poate fi folosit pentru layout (ex. margin, padding).

Exemplu: Prima linie din paragraf este stilizată diferit.

::placeholder

Descriere: Pseudo-elementul ::placeholder permite stilizarea textului de tip placeholder din câmpurile de formular, cum ar fi <input> sau <textarea>. Este util pentru personalizarea interfeței și îmbunătățirea experienței utilizatorului.

Utilizare: Se aplică direct pe elementele de formular care conțin atributul placeholder. Poate fi combinat cu proprietăți precum color, font-style, opacity, font-size.

Compatibilitate: Suportat pe toate browserele moderne. Prefixele ::-webkit-input-placeholder și ::-moz-placeholder pot fi necesare pentru compatibilitate extinsă.

Exemplu: Textul placeholder este stilizat cu o culoare și un font diferit.

::selection

Descriere: Pseudo-elementul ::selection permite aplicarea de stiluri asupra textului selectat de utilizator cu mouse-ul sau tastatura. Este util pentru personalizarea experienței vizuale în interacțiunea cu conținutul.

Utilizare: Se aplică pe orice element care conține text. Poate fi combinat cu proprietăți precum color, background-color, text-shadow. Nu suportă toate proprietățile CSS.

Compatibilitate: Suportat pe majoritatea browserelor moderne. Pentru compatibilitate extinsă, se pot folosi prefixe precum ::-moz-selection și ::-webkit-selection.

Exemplu: Textul selectat este evidențiat cu un fundal personalizat.

Pseudo-elemente avansate

Pe lângă pseudo-elementele CSS consacrate și complet suportate, există o serie de pseudo-elemente avansate, introduse în specificațiile recente, care oferă funcționalități spectaculoase. Acestea permit stilizarea unor componente complexe, interacțiuni media, tranziții vizuale și personalizarea profundă a elementelor shadow DOM. Deși promițătoare, multe dintre ele sunt încă în stadiu experimental și nu beneficiază de suport complet în toate browserele.

::highlight()

Descriere: Permite definirea unui set de stiluri personalizate pentru textul evidențiat (highlighted) prin JavaScript, folosind API-ul Highlight.

Utilizare: Se folosește împreună cu CSSHighlightRule și HighlightRegistry în JavaScript. Este ideal pentru aplicații educaționale, editoare de cod sau interfețe interactive.

Compatibilitate: Suport experimental în Chrome și Edge. Nu este disponibil în Firefox sau Safari.

Exemplu: Evidențierea dinamică a unui cuvânt într-un paragraf.

/* CSS */
::highlight(myHighlight) {
  background-color: yellow;
  color: black;
}

::part() și ::slotted()

Descriere: Aceste pseudo-elemente permit stilizarea componentelor din Shadow DOM, oferind control asupra părților interne ale unui Web Component.

Utilizare: ::part() accesează o parte expusă explicit prin atributul part, iar ::slotted() stilizează conținutul introdus prin sloturi.

Compatibilitate: Suport bun în Chrome, Edge și Safari. Firefox are suport parțial.

Exemplu: Stilizarea unui slot dintr-un Web Component.

/* CSS */
::slotted(h1) {
  color: royalblue;
  font-size: 2em;
}

::view-transition-*

Descriere: Parte din API-ul View Transitions, aceste pseudo-elemente permit animarea tranzițiilor vizuale între stări ale unei pagini sau aplicații. Sunt ideale pentru SPA-uri, navigație fluidă și efecte cinematice.

Utilizare: Se folosesc împreună cu document.startViewTransition() în JavaScript și permit stilizarea tranziției dintre stări.

Compatibilitate: Suport experimental în Chrome și Edge. Nu este disponibil în Firefox sau Safari.

Exemplu: Stilizarea imaginii în tranziție.

/* CSS */
::view-transition-image-pair() {
  animation: fade 0.5s ease-in-out;
}

::target-text

Descriere: Permite stilizarea textului care este ținta unui fragment URL (ex: #paragraf). Este util pentru evidențierea automată a conținutului accesat direct prin link.

Utilizare: Se aplică automat când un fragment de tip #id este accesat în URL. Poate fi folosit pentru ghiduri, documentații sau navigație contextuală.

Compatibilitate: Suport experimental în Chrome. Nu este disponibil în Firefox sau Safari.

Exemplu: Stilizarea automată a textului țintit.

/* CSS */
::target-text {
  background-color: lightyellow;
  outline: 2px dashed orange;
}

::scroll-marker & ::scroll-marker-group

Descriere: Aceste pseudo-elemente permit stilizarea indicatorilor de pe bara de scroll, oferind feedback vizual despre poziția conținutului (ex: marcaje pentru erori, comentarii, secțiuni).

Utilizare: Se folosesc în combinație cu API-ul ScrollTimeline și pot evidenția puncte cheie în conținutul scrollabil.

Compatibilitate: Suport experimental în Chrome. Nu sunt disponibile în Firefox sau Safari.

Exemplu: Stilizarea unui marker pe scrollbar.

/* CSS */
::scroll-marker {
  background-color: red;
}
::scroll-marker-group {
  background-color: blue;
}

::picker-icon

Descriere: Permite stilizarea iconiței implicite din elementele de tip <input type="date">, <input type="color"> etc. Oferă control asupra aspectului vizual al interfeței native.

Utilizare: Se aplică pe inputuri care afișează un picker nativ. Poate fi folosit pentru a personaliza culoarea, dimensiunea sau forma iconiței.

Compatibilitate: Suport experimental în Chromium. Nu este disponibil în Firefox sau Safari.

Exemplu: Stilizarea iconiței de calendar.

/* CSS */
input::picker-icon {
  filter: invert(1);
  opacity: 0.6;
}

Pseudo-elementele CSS oferă un nivel suplimentar de control asupra prezentării vizuale, permițând stilizarea precisă a părților interne ale elementelor HTML. Fie că sunt complet suportate sau încă în stadiu experimental, ele extind semnificativ posibilitățile de design și interacțiune în dezvoltarea web modernă.

🧠 Quiz - Pseudo-elemente CSS