✅Estilo a los Diferentes Estados de un Enlace con CSS

Podemos darle estilo a los diferentes estados de un enlace. Por ejemplo un color diferente cuando nunca hemos hecho clic, otro cuando pasamos el ratón por encima, otro cuando ya hemos hecho clic en el enlace y otro cuando el enlace está activo.

Para ello vamos a utilizar las siguientes pseudoclases.

Las pseudoclases se usan para definir un estado especial de un elemento.

• Enlace sin visitar. a:link
• Enlace visitado. a:visited
• Enlace hover (Al pasar el ratón). a:hover
• Enlace activo. a:active

Importante: a:hover debe ir depués de a:link y a:visited en la definición CSS para que la regla sea efectiva.

Importante: a:active debe ir después de a:hover en la definición CSS para que la regla sea efectiva.

Estructura CSS

/* Enlace sin visitar */
a:link {
  color: red;
}

/* Enlace visitado */
a:visited {
  color: green;
}

/* Al pasar el ratón */
a:hover {
  color: hotpink;
}

/* Enlace activo */
a:active {
  color: blue;
}
Lenguaje del código: CSS (css)