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
