Standardowy wygląd linków na stronie internetowej zależny jest od przeglądarki. Każdy browser może wyświetlać linki i ich warianty (z różnymi pseudoklasami) w odmienny sposób.

Zazwyczaj jednak chcemy ustawić własne style, po to, by linki wyglądały tak samo niezależnie od tego, z jakiej przeglądarki korzystamy.

Do tego służą pseudoklasy:

• a – określa wygląd normalnego linku
• a:visited -określa wygląd linku, który został już wcześniej odwiedzony
• a:focus – określa wygląd linku kiedy jest na nim skupiona „uwaga” przeglądarki, np. kiedy użytkowanik korzysta z tabulatora by nawigować po linkach
• a:hover -określa wygląd linku po najechaniu na niego myszką
• a:active – określa wygląd aktualnie aktywnego linku (w momencie kliknięcia na niego)

Użycie pseudoklas sprawia, że możemy nadać linkom na naszej stronie specyficzny wygląd, np. określić ich kolor, wagę czcionki, to, czy mają posiadać jakiś dekorator tekstu czy nie (np. podkreślenie), albo usunąć ramkę, tzw. outline.

Poniżej kilka przykładów linków z różnymi stylami:

See the Pen link styling with pseudoclass by Joanna (@JoannaEl) on CodePen.0