Te-ai întrebat vreodată cum reușesc marile publicații și platforme online să afișeze automat o mică pictogramă lângă linkurile care trimit către alte site-uri? În loc să adaugi manual clase CSS fiecărui link extern în parte, poți automatiza acest proces direct din foaia de stil folosind selectorul de atribut de prefix (^=).
Cum funcționează selectorul de început de șir (X[href^=”http”])
Selectorul CSS [atribut^=valoare] verifică dacă valoarea atributului începe cu șirul specificat. Deoarece legăturile externe folosesc de obicei adrese URL absolute (care încep cu protocolul http:// sau https://), le putem izola cu ușurință de linkurile interne relative (care încep cu /, # sau numele paginii):
/* Identificarea linkurilor care încep cu protocolul HTTP sau HTTPS */
a[href^="http://"],
a[href^="https://"] {
padding-right: 18px;
background: url('caleaspreiconita/icon-extern.png') no-repeat right center;
background-size: 14px 14px;
}Alternativ, poți folosi forma scurtă a[href^="http"], care va acoperi automat atât protocolul http://, cât și protocolul securizat https://.
Cum excluzi linkurile interne dacă folosești URL-uri absolute
Dacă site-ul sau platforma ta folosește structuri de URL-uri absolute și pentru paginile proprii (de exemplu, https://dexblog.ro/despre-noi), selectorul a[href^="http"] le va stiliza și pe acestea. Pentru a restrânge regula strict la domeniile terțe, poți combina pseudo-clasa :not() cu selectorul de substring:
/* Stilizează doar linkurile externe, exceptând domeniul propriu */
a[href^="http"]:not([href*="dexblog.ro"]) {
color: #d35400;
padding-right: 16px;
background: url('/imagini/external-arrow.svg') no-repeat right center;
background-size: 12px 12px;
}Beneficii de uzabilitate și experiență a utilizatorului (UX)
Diferențierea linkurilor externe aduce multiple avantaje pentru vizitatori:
- Transparență și siguranță: Utilizatorul știe dinainte dacă un clic îl va menține pe site-ul tău sau îl va redirecționa către o sursă externă.
- Mentenanță zero: Orice autor sau editor poate introduce legături în text fără să-și facă griji despre aplicarea unor clase HTML speciale.
- Accesibilitate: Oferă o ierarhie vizuală clară și sporește predictibilitatea navigației.
