Ghid CSS: cum stilizezi elegant stările linkurilor (:link, :visited, :hover, :active)

Hyperlinkurile (eticheta <a>) reprezintă elementul central al navigației web. Pentru o experiență de navigare optimă (UX) și o interfață intuitivă, este esențial ca linkurile să fie ușor de recunoscut și să ofere feedback vizual imediat atunci când utilizatorul interacționează cu ele.

Stările principale ale unui link și regula ordinii LVHA

CSS folosește pseudo-clase pentru a stiliza stările diferite prin care trece un link. Ordinea de declarare a acestora în fișierul de stiluri este critică din cauza cascadei de specificitate. Regula generală se reține ușor prin mnemotehnica LVHA (LoVe / HAte):

• :link – stilul implicit al unei legături nevizitate încă de utilizator.
• :visited – stilul legăturii după ce pagina la care face trimitere a fost vizitată.
• :hover – stilul aplicat când utilizatorul trece cu cursorul mouse-ului peste link.
• :active – starea activă din momentul precis în care linkul este apăsat (la clic).

Exemplu complet de configurare CSS

Iată cum poți structura corect stilurile pentru linkurile dintr-un site:

/* Stiluri de bază pentru toate legăturile */
a {
    text-decoration: underline;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

/* 1. Link nevizitat */
a:link {
    color: #0066cc;
}

/* 2. Link vizitat în istoricul browserului */
a:visited {
    color: #6a1b9a;
}

/* 3. Cursor poziționat deasupra linkului */
a:hover {
    color: #d32f2f;
    text-decoration: none;
}

/* 4. Link apăsat (clic în desfășurare) */
a:active {
    color: #b71c1c;
}

/* Recomandat pentru accesibilitate la navigarea prin tastatură (tasta Tab) */
a:focus {
    outline: 2px solid #0066cc;
    outline-offset: 2px;
}

Bune practici pentru design și accesibilitate

• Contrast și diferențiere cromatică: alege o culoare care contrastează clar atât cu fundalul, cât și cu textul obișnuit al paragrafului, conform standardelor de accesibilitate WCAG.
• Păstrarea unui indiciu vizual clar: dacă dezactivezi sublinierea la starea inițială, asigură-te că linkul iese în evidență prin culoare, greutate a fontului sau efect de hover.
• Confidențialitatea pseudo-clasei :visited: din motive de securitate, browserele moderne limitează proprietățile ce pot fi modificate prin :visited doar la culori (text, fundal, chenar), prevenind modificarea dimensiunilor sau a fonturilor.
• Efecte de tranziție line: adăugarea unei tranziții discrete cu transition conferă o senzație plăcută și modernă la interacțiunea cu mouse-ul.