Enlaces subrayados arriba y abajo

15/Ene/2007 CSS , 6 Comentarios
Ejemplos Programación CSS

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.

Vídeos sobre CSS


6 comentarios en “Enlaces subrayados arriba y abajo”

Víctor Cuervo

angie

A:hover{
text-decoration: overline underline
} Ola

Víctor Cuervo

angie

A:hover{Dioz
text-decoration: overline underline
}

Víctor Cuervo

angie

Por amor de dioz :hover{
text-decoration: overline underline
}

Víctor Cuervo

angie

A:hover{
text-decoration: underline
}

Dioz

Víctor Cuervo

Esmeralda Ibarra Estrada

NO EN TENDI NADA DE LO K EXPLICARON AVERB SI
LUEGO PONEN MAS INFORMACION Y MAS EXPLICADA
Y X SU CULPA X K NO ENTENDI NADA DE LO K
EXPLICARON REPROVE EL AÑO DE MATEMATICAS

*****

o__ :::::::__o
Esmeralda (yopi) XXXX
l l
O O

Víctor Cuervo

mp

y castellano tambien por lo que veo

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.