Seguro que muchos de vosotros habéis subrayado alguna vez una frase o palabra para darle importancia. Bien, con CSS se puede hacer, una es mediante text-decoration: underline;”, la otra es creando un borde inferior (border-bottom), esta última sería un subrayado falso. ¿Cómo sería el ejemplo? Muy sencillo.

Un subrayado real, sería de esta forma:

Código HTML

<h2>Mi título</h2>

Código CSS

La clave del código CSS está en text-decoration: underline. La propiedad text-decoration le da decoración al texto, y teniendo el valor underline, nuestro texto quedará subrayado.

h2 { text-decoration: underline; float: left; display: block; width: 320px; margin-left: 10px; }

Ahora, ¿qué ocurre si queremos hacer un subrayado falso? Podemos usar border-bottom para falsear el subrayado. El código HTML sería el mismo, pero el código CSS cambiaría, sustituiríamos text-decoration: underline; por border-bottom: 1px solid #000, por ejemplo. Ahora lo vas a ver mejor:

Código CSS

h2 { border-bottom: 1px solid #000; float: left; display: block; width: 320px; margin-left: 10px; }

En border-bottom, 1px nos dice que le daremos un grosor al subrayado de 1 píxel, solid, que será un borde sólido, y #000 será el color RGB, en este caso sería negro.

Con esto ya tendríamos nuestro subrayado falso. Puedes ver un ejemplo a continuación:

Vía | Araudi