Estilos CSS para enlaces

Un enlace (el elemento HTML <a>) es una de las cosas más clicadas en cualquier página, por lo que su estilo importa tanto para la apariencia como para la usabilidad. En este capítulo explicaremos cómo dar estilo a los enlaces con CSS y hacerlos claros, accesibles y visualmente atractivos.

Los estados de un enlace (pseudoclases)

CSS expone un enlace a través de cinco pseudoclases, cada una correspondiente al enlace en un estado determinado:

a:link — un enlace normal, no visitado
a:visited — un enlace que el usuario ya ha visitado
a:hover — un enlace sobre el que pasa el ratón
a:active — un enlace en el momento en que se hace clic
a:focus — un enlace que ha recibido el foco del teclado (por ejemplo, mediante la tecla Tab)

Puedes usar cualquiera de estas de forma individual, pero cuando aplicas estilos a varias a la vez el orden es importante. Dado que :hover, :active y :visited tienen la misma especificidad, una regla posterior anula a una anterior. El orden convencional y funcional es LVHA — :link, :visited, :hover, :active:

a:link    { color: #1c87c9; }  /* normal   */
a:visited { color: #8e44ad; }  /* visited  */
a:hover   { color: #f4511e; }  /* mouse over */
a:active  { color: #c0392b; }  /* clicked  */

Si colocas :hover antes que :visited, el color al pasar el ratón nunca se mostraría en los enlaces visitados. Un truco mnemotécnico útil es "LoVe HAte" (amor-odio). Añade :focus (generalmente junto a :hover) para que los usuarios de teclado reciban la misma retroalimentación que los usuarios de ratón — omitirlo es un error de accesibilidad frecuente.

Cubriremos las tres propiedades más usadas para dar estilo a los enlaces:

Decoración de texto

Por defecto, el navegador dibuja un subrayado bajo cada enlace. Para cambiarlo o eliminarlo, usa la propiedad text-decoration. Establecer text-decoration: none elimina el subrayado; volver a underline en :hover es un patrón popular que mantiene la página ordenada y al mismo tiempo indica que se puede hacer clic en la interacción.

Una advertencia: eliminar el subrayado por completo puede dificultar la identificación de los enlaces, especialmente para los usuarios que no perciben bien el color. Si lo eliminas, haz que los enlaces destaquen de otra manera — con un color distinto, un font-weight, o restaurando el subrayado en hover y focus.

Ejemplo del uso de la propiedad text-decoration para dar estilo a un enlace:

Ejemplos de text-decoration en enlaces CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        text-decoration: none;
      }
      a:visited {
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      a:active {
        text-decoration: underline;
      }
    </style>
  </head>
  <body>
    <a href="#"> This is some link.</a>
  </body>
</html>

Pruébalo tú mismo »

Explicación del código.

Aquí puedes ver que el enlace en su primer y segundo estado no tendrá subrayado. El enlace aparece subrayado cuando el usuario pasa el ratón por encima o hace clic en él.

Puedes comprobarlo en tu navegador usando tus editores o nuestro editor en línea.

Estos estilos pueden escribirse en la sección <head> o en un archivo CSS que utilizarás para tu página web.

Color

Usamos la propiedad color para establecer el color de un enlace.

Por ejemplo, si queremos que nuestro enlace sea negro por defecto y #1c87c9 en su tercer estado (a:hover), necesitamos escribir lo siguiente:

Ejemplo del uso de la propiedad color para dar estilo a un enlace:

Ejemplos de color en enlaces CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link {
        color: #000000;
      }
      a:visited {
        color: #000000;
      }
      a:hover {
        color: #1c87c9;
      }
      a:active {
        color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Pruébalo tú mismo »

Resultado

Color de fondo

¿Qué podemos hacer si queremos que nuestro enlace tenga un fondo?

Solo necesitamos aplicar la propiedad background-color.

Por ejemplo, nuestro enlace tendrá un fondo gris y, al pasar el ratón, cambiará a #1c87c9.

Cuando el primer (a:link) y el segundo (a:visited) estado tienen el mismo color de fondo, podemos usar simplemente a.

Ejemplo del uso de la propiedad background-color para dar estilo a un enlace:

Ejemplos de background-color en enlaces CSS

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a {
        background-color: #555555;
      }
      a:hover {
        background-color: #1c87c9;
      }
      a:active {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Pruébalo tú mismo »

Puedes elegir tu color preferido usando el Selector de color.

Combinándolo todo

En proyectos reales raramente se estiliza solo una propiedad. El ejemplo siguiente combina color, el patrón de subrayado en hover, algo de padding para que el fondo tenga espacio, y una regla :focus que refleja :hover para que los usuarios de teclado reciban retroalimentación visible:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:link,
      a:visited {
        color: #1c87c9;
        text-decoration: none;
        padding: 2px 4px;
        border-radius: 4px;
      }
      a:hover,
      a:focus {
        color: #ffffff;
        background-color: #1c87c9;
        text-decoration: underline;
      }
      a:active {
        color: #ffffff;
        background-color: #14679b;
      }
    </style>
  </head>
  <body>
    <a href="#">This is some link.</a>
  </body>
</html>

Observa cómo agrupar a:link, a:visited con una coma aplica el mismo valor por defecto a ambos estados, y cómo combinar a:hover, a:focus mantiene la experiencia idéntica para usuarios de ratón y teclado.

Consejos de accesibilidad

Nunca te bases solo en el color. Los usuarios con daltonismo pueden no distinguir un enlace azul del texto negro. Mantén el subrayado o combina el color con otra señal visual.
Estiliza siempre :focus. Si eliminas el contorno de foco predeterminado, reemplázalo con tu propio estilo visible — de lo contrario, los usuarios de teclado no sabrán dónde están. Consulta la propiedad outline.
Mantén suficiente contraste. El texto del enlace debe destacar claramente sobre su fondo y sobre el texto del cuerpo que lo rodea.

Resumen

Un enlace tiene cinco estados, cada uno con su propia pseudoclase: :link, :visited, :hover, :active y :focus.
Al dar estilo a varios estados, sigue el orden LVHA para que las reglas posteriores no anulen accidentalmente a las anteriores.
text-decoration controla el subrayado, color establece el color del texto y background-color añade un fondo.
Estiliza siempre :focus y evita señalar los enlaces solo con color para mantener la accesibilidad.

Práctica

¿Qué propiedades se usan en CSS para modificar la apariencia de los enlaces?