Enlaces subrayados arriba y abajo

Los enlaces por definición no tienen una representación tal cual. Si es verdad que por convención parece que el subrayado se ha hecho con esos méritos. Si bien, a partir de la llegada de las hojas de estilo CSS, la visualización de los enlaces pasa a ser muy variopinta: mostrando color de fondo, eliminado el subrayado, cambiando el icono al pasar sobre ellos,… En este caso vamos a ver cómo crear enlaces subrayados arriba y abajo. En este caso no vamos a definir una clase que pueda ser utilizada. Sino que directamente vamos a redefinir el comportamiento de los enlaces HTML. Es decir, vamos a redefinir el comportamiento del elemento a. Para ello simplemente bastará con definir una hoja de estilo con el elemento a.Veamos como quedaría:

a {
  /*Definición de A*/
}

Esta definición de estilo del elemento a la colocaremos dentro del elemento style de nuestra página web.

<html>
  <head>
    <meta charset="UTF-8" />
    <title>Titulo Documento</title>
    <style>
      a {
        /*Definición de A*/
      }
    </style>
  </head>
  <body>
    <!-- Documento HTML5 -->
  </body>
</html>

En concreto vamos a redefinir el comportamiento de cuando pasemos el puntero por encima del enlace. Es decir, el selector hover. El código quedaría de la siguiente forma:

a:hover {
  /*Definición de A*/
}

El atributo CSS que modifican el subrayado inferior y superior es el text-decoration. Y los valores con los que podemos jugar son overline, si queremos un subrayado por encima del texto y underline si queremos el subrayado por debajo del texto. En nuestro caso vamos a utilizar ambos. El código para tener enlaces subrayados arriba y abajo quedaría de la siguiente forma:

a:hover {
  text-decoration: overline underline;
}

Ahora solo nos queda poner enlaces en la página donde tengamos definida esta hoja de estilo para poder tener enlaces subrayados arriba y abajo.

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Enlaces subrayados arriba y abajo

Cómo configurar tus css para poder obtener enlaces subrayados arriba y abajo utilizando el selector hover y la propiedad text-decoration.

Descargar código