Pseudo-Elemente CSS Ghid Rapid — Complete Guide

In this tutorial, you'll learn about Pseudo. We cover key concepts, practical examples, and best practices.

Vei învăța cum să folosești pseudo-elementele CSS pentru a adăuga conținut vizual și stilizare fără a modifica HTML-ul, de la iconițe și badge-uri până la citate și efecte vizuale.

Problema

Adăugarea de elemente decorative precum iconițe, linii, ghilimele sau badge-uri necesită deseori HTML suplimentar, ceea ce încarcă structura paginii și face codul mai greu de întreținut. Pseudo-elementele ::before și ::after rezolvă această problemă generând conținut direct din CSS.

Rezolvare rapidă

Pasul 1: Folosește ::before și ::after pentru conținut generat

/* Greșit — element HTML gol pentru decor */
/* <span class="icon"></span> */

/* Corect — pseudo-element CSS */
.link::before {
    content: "→ ";
    color: #3498db;
}

.link::after {
    content: " ←";
    color: #3498db;
}

Rezultat: Săgețile apar înainte și după link fără HTML suplimentar.

Pasul 2: Stilizează prima linie și prima literă

/* Greșit — clase separate pentru prima linie */
/* Corect — pseudo-elemente dedicate */
p::first-line {
    font-weight: bold;
    color: #2c3e50;
}

p::first-letter {
    font-size: 3em;
    float: left;
    margin-right: 8px;
    color: #e74c3c;
    font-family: serif;
}

Rezultat: Prima linie este îngroșată, iar prima literă devine o majusculă decorativă (drop cap).

Pasul 3: Creează efecte vizuale cu ::before și ::after

.card {
    position: relative;
    padding: 20px;
    background: #fff;
}

/* Greșit — element HTML pentru badge */
/* Corect — badge generat CSS */
.card::before {
    content: "Nou";
    position: absolute;
    top: -8px;
    right: -8px;
    background: #e74c3c;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

Rezultat: Un badge "Nou" apare în colțul cardului fără markup suplimentar.

Pasul 4: Folosește content cu atribute și URL-uri

/* Conținut din atributul HTML */
a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #999;
}

/* Iconiță cu URL imagine */
.menu-item.external::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url('external-icon.svg') no-repeat center;
    margin-left: 4px;
}

Rezultat: Link-urile externe afișează automat URL-ul, iar elementele externe au o iconiță.

Pasul 5: Pseudo-elemente goale pentru layout și decor

/* Linie decorativă cu ::after */
.heading {
    text-align: center;
}

.heading::after {
    content: "";
    display: block;
    width: 60px;
    height: 3px;
    background: #3498db;
    margin: 10px auto 0;
    border-radius: 2px;
}

/* Overlay cu ::before */
.hero::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

Rezultat: Linii decorative și overlay-uri fără elemente HTML suplimentare.

Prevenire

• Proprietatea content este obligatorie pentru ::before și ::after (chiar și goală)
• Pseudo-elementele nu funcționează pe elemente void (<img>, <br>, <input>)
• Folosește attr() pentru a extrage conținut din atribute HTML
• ::before și ::after sunt inline implicit — setează display: block când e nevoie

Greșeli comune

1. Omisiunea proprietății content — Fără content, pseudo-elementul nu se afișează deloc.
2. Folosirea pseudo-elementelor pe elemente void — <img>, <input>, <br> nu suportă ::before/::after.
3. Confundarea :: cu : — Pseudo-elementele folosesc :: (CSS3), pseudo-clasele folosesc :.
4. Uitarea lui display: block pentru layout — Implicit, pseudo-elementele sunt inline și nu răspund la width/height.
5. Generarea de conținut textual care nu este accesibil — Conținutul din content nu este citit de toate cititoarele de ecran.

Exercițiu

Creează o listă de citate cu ghilimele decorative folosind ::before și ::after. Adaugă un efect de tooltip care apare la hover folosind doar pseudo-elemente, fără HTML suplimentar.

Întrebări frecvente

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu CSS și HTML pentru productivitate și securitate sporită.