Enlaces subrayados arriba y abajo

15/ene/2007 CSS , 5 Comentarios
css

Los enlaces como 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. A partir de la llegada de las hojas de estilo CSS, la visualización de los enlaces pasa a ser muy variopinta. En este caso vamos a ver como 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 de la etiqueta ancla A.

Para ello simplemente bastará con definir una hoja de estilo con el elemento A.Veamos como quedaría:

  1. <style>
  2. A {
  3. /*Definición de A*/
  4. }
  5. </style>

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

  1. <style>
  2. A:hover {
  3. /*Definición de A*/
  4. }
  5. </style>

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:

  1. <style>
  2. A:hover {
  3. text-decoration: overline underline
  4. }
  5. </style>

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

Ningún video coincide

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 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

¿Algo que nos quieras comentar?

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

*


*