• react.png
  • angular.png
  • node.png
  • html5.png
  • php.png

Subrayados (Underline) personalizados con CSS

underline.png

Si quisieramos cambiar el color del Subrayado de la etiqueta solo basta con quitarle el text-decoration y colocar un border-bottom
con el color que queremos que sea el borde.

 

Haciendolo de esta manera tendremos un mayor control de sobre el color a elegir, lo delgado o ancho del borde, etc.
Codigo:

a[href] {
  border-bottom: 1px solid gray;
  text-decoration: none;
}

Ahora bien, tambien podemos modificar el ancho de nuestro contenedor de texto y asi crear una apariencia de hacer un Subrayado en 2 lineas de texto, pero al final
esta forma de crear Subrayados no es buena practica.

Codigo:

a[href] {
  border-bottom: 1px solid gray;
  text-decoration: none;
  display: inline-block;
  line-height: .9;
}

Resultado:

IMAGEN2.png

Podriamos utilizar la propiedad box-shadow para emular Subrayados en nuestra etiqueta, por ejemplo:

Codigo:

a[href] {
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 -1px gray inset;
}

Ahora bien, para tener de manera apropieda y flexible un subrayado vamos a utilizar lo siguiente:

a[href] {
  background: linear-gradient(gray, gray) no-repeat;
  background-size: 100% 1px;
  background-position: 0 1.5em;
}

Posiblemente sea raro el uso de las propiedades anteriores pero tenemos una manera más pura y flexible.

Podemos crear diferentes tipos de subrayados con esas propiedades, por ejemplo:

a[href] {
  background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
  background-size: .2em 2px;
  background-position: 0 1em;
}

Resultado:

IMAGEN2.png
@telecristy.

0/1000

Necesitas conectarte ó registrarte para comentar