Artículos
CSS

Enlaces subrayados arriba y abajo

15/Ene/2007

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.

<!DOCTYPE html>
<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.

Código Fuente

Descárgate el código fuente de Enlaces subrayados arriba y abajo
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Test CSS

¿Te atreves a probar tus habilidades y conocimiento en CSS con nuestro test?

Test CSS
Suscribir
Notificar de
guest
6 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios