Cuando queremos subrayar un texto usamos la mayor parte de veces el clásico text-decoration: undeline;, pero a veces se nos queda un poco pobre el estilo. Una línea fina, muy pegada al texto y del mismo color del texto. También podemos usar border-bottom con un padding-bottom. Pero la linea queda un poco rara… ¡Vamos a verlo!

Aquí tenemos el ejemplo de el text-decoration:

.underline{
    text-decoration: underline;
}
El codygo

Aquí tenemos el ejemplo de el border-bottom:

.underline{
    border-bottom: 4px solid #222222;
    display: inline-block;
    line-height: 0.85em;
}
El codygo

Ahora bien podemos usar otras propiedades para mejorar estos estilos:

.underline{
    border-bottom: 4px solid #222222;
    display: inline-block;
    line-height: 0.85em;
    text-shadow: 2px  2px #fbfbfb, 
                 2px -2px #fbfbfb, 
                -2px  2px #fbfbfb, 
                -2px -2px #fbfbfb;
}
El codygo

Lo que hacemos aquí es contonear la tipografía para poder evitar que la línea y la tipo se superpongan creando una masa de color que no es demasiado bonito.

El codygo
(Haz rollover para ver la diferencia)

La desventaja es que se tiene que hacer el reborde en función del color de fondo, no és dinámico y mucho menos hablemos de una foto de fondo… ¡Tiene sus pegas pero también tiene sus ventajas!

Categorías: CSS
Si necesitas una url corta puede usar: codygo.es/2035

Deja un comentario