Existem diferentes estados de um link, incluindo link, visited, hover, focus e active. Esses estados são importantes para ajudar os usuários a reconhecer links e fornecer um feedback claro após as interações, o que melhora tanto a usabilidade e a acessibilidade. Estilizar esses diferentes estados de link é crucial para usabilidade e acessibilidade, pois fornece indicações visuais sobre o estado atual do link. Isso ajuda os usuários a entender quais links eles visitaram, com qual link eles estão interagindo e o que acontecerá quando clicarem. Para usuários com deficiências visuais ou cognitivas, esses estilos distintos podem tornar a navegação muito mais fácil e intuitiva. Além disso, estados claros de link melhoram a experiência geral do usuário ao fornecer feedback imediato sobre as interações do usuário, reduzindo a confusão e melhorando a navegabilidade do site. Esses estados podem ser estilizados usando algo chamado pseudo-classes em CSS. Uma pseudo-classe é uma palavra-chave adicionada a um seletor que especifica um estado especial do elemento selecionado. Por exemplo, :hover pode mudar a cor de um botão quando o ponteiro do usuário passa sobre ele, enquanto :visited pode mudar a cor de um link que já foi visitado. Pseudo-classes permitem que você estilize elementos com base no estado deles ou na interação do usuário com eles, sem a necessidade de marcação adicional no seu HTML. A sintaxe de um pseudo-class se parece com isto onde A é o seletor e :B é o pseudo-class:

A:B {
  property: value;
}

Para entender melhor como estilizar os diferentes estados de link, vamos dar uma olhada em alguns exemplos. A pseudo-classe :link estiliza links não visitados, indicando que eles são clicáveis. Aqui está um exemplo de como direcionar um elemento anchor e usar a pseudo-classe :link:

<link rel="stylesheet" href="styles.css">

<a href="/">Example link</a>

/* Normal state (unvisited link) */
a:link { 
  color: red;
}

O exemplo acima mudará a cor azul padrão do link para red quando ele não for visitado. Estilos :visited aplicam-se a links que já foram visitados ou clicados, ajudando os usuários a acompanhar quais links eles já clicaram antes. Aqui está um exemplo de uso da pseudo-classe :visited:

<link rel="stylesheet" href="styles.css">

<a href="https://www.G.E.A.R ACADEMY.org/learn/" target="_blank">G.E.A.R ACADEMY</a>

/* Visited link */
a:visited {
  color: green;
}

Este código vai colorir o link para green quando ele for clicado. :hover altera o estilo do link quando o usuário passa o cursor sobre ele, fornecendo uma indicação visual de que o link é interativo. Aqui está um exemplo de uso da pseudo-classe :hover:

<link rel="stylesheet" href="styles.css">

<a href="/">Example link</a>

/* Hover state */
a:hover {
  color: green;
}

Este código vai colorir os links para green quando o mouse passar sobre eles. :focus adiciona estilos ao redor do link quando ele está focado, como ao navegar com o teclado ou melhorar a acessibilidade. Aqui está um exemplo usando a propriedade outline para aplicar um contorno laranja sólido quando o link está focado.

<link rel="stylesheet" href="styles.css">

<a href="/">Example link</a>

/* Focus state */
a:focus {
  outline: 2px solid orange;
}

:active altera os estilos do link enquanto o link está sendo clicado, fornecendo um feedback imediato ao usuário de que a ação dele está sendo registrada. Aqui está um exemplo de uso da pseudo-classe :active:

<link rel="stylesheet" href="styles.css">

<a href="/">Example link</a>

/* Active state */
a:active {
  color: pink;
}

Este exemplo de código fará com que o link fique com a cor pink imediatamente quando o link for clicado.