Mis apuntes de desarrollo web </>

Estilos para los Enlaces

Es importante comprender cómo hacer uso de pseudoclases para agregar estilos a los diferentes estados de los enlaces de manera efectiva.

Estados (pseudoclases) de enlaces:

link:
Un enlace que tiene un destino (es decir, no solo un ancla con nombre).
visited:
Un enlace que ya ha sido visitado (existe en el historial del navegador).
hover:
Un enlace sobre el que se desplaza el puntero del mouse de un usuario.
focus:
Un enlace que está enfocado (p. Ej., Movido por un usuario del teclado usando la Tab tecla o algo similar, o enfocado programáticamente usando HTMLElement.focus()).
active:
Un enlace que se activa (por ejemplo, se hace clic en él).
ejemplo estilos link 1 Apuntes HTML de Enlaces

Incluir iconos en enlaces:

Para incluir iconos en los enlaces se establece como un background de la siguiente manera:

  1. La ruta a la imagen del icono que se quiere insertar.
  2. Especificar no-repeat para que solo obtener una copia insertada.
  3. Especificamos la posición como 100% del camino a la derecha del contenido del texto y 0 píxeles desde la parte superior.
  4. background-size: Para especificar el tamaño de la imagen de fondo. Debe ser igual al tamaño de la fuente del enlace.
  5. padding-right: Deja un espacio para que aparezca la imagen de fondo, de modo que no se superponga con el texto.
ejemplo estilos link 2 Apuntes HTML de Enlaces