feed twitter facebook LinkedIn facebook

CSS » Enlaces subrayados arriba y abajo

enero 15, 2007 por Víctor Cuervo 5 Comentarios Imprimir Imprimir

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 que estén 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 <A>

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

<STYLE>
A{ 
/*Definición de A*/
}
</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:

<STYLE>
A:hover{ 
/*Definición de A*/
}
</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 completo quedaría de la siguiente forma:

<STYLE>
A:hover{ 
 text-decoration: overline underline 
}
</STYLE>

Ahora solo nos queda poner enlaces en la página donde tengamos definida esta hoja de estilo.

Ver el ejemplo | Descargar el código

tags:

Artículos relacionados:

5 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

  1. Esmeralda Ibarra Estrada
    junio 16, 2007 #

    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

  2. angie
    julio 12, 2009 #

    A:hover{
    text-decoration: underline
    }

    Dioz

  3. angie
    julio 12, 2009 #

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

  4. angie
    julio 12, 2009 #

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

  5. angie
    julio 12, 2009 #

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

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*