Por defecto, todos los enlaces están subrayados en azul, pero este aspecto se puede cambiar fácilmente con la propiedad CSS text-decoration: none.

Eliminar el Subrayado de Enlaces en CSS

Supongamos que tienes un enlace:

<a class="link" href="#form">Catálogo de productos</a>

Para eliminar el subrayado, abre el archivo de estilos y escribe:

.link {
  text-decoration: none;
}

En lugar del selector de clase, puedes utilizar otros selectores, como un selector de tipo de elemento o un selector de ID de atributo.

Eliminar el Subrayado de Enlaces en HTML

Si no tienes acceso al archivo de estilos o si tu trabajo requiere estilos en línea, puedes eliminar el subrayado directamente en HTML.

Eliminar los estilos en un enlace:

<a href="#" style="text-decoration: none;">Algún enlace</a>

Eliminar el subrayado en todos los enlaces:

<head>
  <style>
    a {
      text-decoration: none;
    }
  </style>
</head>

El selector puede ser cualquiera; en este ejemplo, mostramos un selector de etiquetas.

Ten cuidado al combinar estilos en línea y CSS externo, ya que los estilos en el atributo style son difíciles de anular.

Cuándo Eliminar el Subrayado

Elimina el subrayado si planeas diseñar el enlace como un botón u otro elemento interactivo, como una tarjeta de producto. En otros casos, es mejor dejarlo, porque el subrayado de los enlaces es familiar para los usuarios. Si eliminas los estilos, a los visitantes del sitio les resultará más difícil distinguir los enlaces del texto normal.

Ejemplo de subrayado de enlace con CSS
Ejemplo de subrayado de enlace con CSS

También puedes eliminar el subrayado del enlace y añadirlo al bloque de texto, por ejemplo, mediante border-bottom. Esta técnica se utiliza más a menudo para la navegación: el usuario ve que los elementos del menú se pueden hacer clic y comprende en qué página se encuentra.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú de Navegación</title>
<style>
  /* Estilos generales para los enlaces */
  a {
    text-decoration: none; /* Elimina el subrayado predeterminado */
    color: black; /* Color del enlace */
    padding-bottom: 2px; /* Espacio para el borde inferior */
    border-bottom: 2px solid transparent; /* Borde inferior invisible por defecto */
    transition: border-bottom-color 0.3s; /* Transición para un efecto suave */
  }

  /* Estilos para enlaces cuando el usuario pasa el ratón sobre ellos */
  a:hover {
    border-bottom-color: black; /* Aparece el borde inferior al pasar el ratón */
  }

  /* Estilos para el enlace de la página actual */
  .active {
    border-bottom-color: black; /* Borde inferior visible para la página actual */
  }

  /* Estilos específicos para el contenedor del menú */
  .menu {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0;
    display: flex; /* Muestra los elementos en línea */
  }

  .menu li {
    margin-right: 15px; /* Espacio entre elementos del menú */
  }
</style>
</head>
<body>
  <nav>
    <ul class="menu">
      <li><a href="#" class="active">Inicio</a></li>
      <li><a href="#">Servicios</a></li>
      <li><a href="#">Acerca de</a></li>
      <li><a href="#">Contacto</a></li>
    </ul>
  </nav>
</body>
</html>

Así que, si no te gusta el aspecto de los enlaces, personalízalos a tu gusto. Puedes encontrar ejemplos en el artículo sobre el subrayado de texto no estándar con CSS puro. Lo principal es no olvidar la experiencia del usuario (UX) y tratar de no utilizar estilos en línea.

Categorizado en:

CSS,