Si te gusta el diseño web, eres curioso/a o lees bastantes noticias por internet, seguramente hayas visto ese efecto de texto subrayado que aparece en muchos blogs y periódicos. Algunos simplemente subrayan las partes más importantes de los textos, y otros incluso tienen un pequeño efecto cuando pasas el ratón por encima ¿Te suena?
Por ejemplo, nosotros lo usamos mucho en nuestros artículos, para dar importancia a ciertas cosas y no siempre poner negritas, pues si se usa demasiado la negrita, el párrafo puede quedar recargado.
Pues bien, hacer esto no es demasiado complicado. Tenemos 3-4 distintas maneras de subrayar el texto, e infinitas formas de personalizarlo para que tu web se vea distinta al resto.
Subrayar el texto con html
La opción más sencilla para subrayar un texto en html es usando la etiqueta <u>. Esta etiqueta recoge la primera letra de la palabra “underline”, que significar subrayar en inglés. Simplemente añadiremos <u> (la apertura de la etiqueta) delante del texto a subrayar, y también añadiremos </u> (El cierre de la etiqueta) detrás del texto que queramos subrayar.
<u> Texto que queremos subrayar</u>
Y listo. Bastaría con copiar y pegar esto en tu html para tener un texto tachado.
Como subrayar el texto con css
Para conseguir el efecto de texto subrayado a través de css, vamos a tener que hacer algún paso más, pero el resultado merecerá la pena. De nuevo, vamos a tener dos formas distintas de hacerlo. Te las explicamos a continuación
Subrayado en css con text-decoration: underline
h3 {
text-decoration: underline;
}
Subrayando en css con border bottom
h3 {
border-bottom: 2px solid #88b2ff;
}
Ejemplo práctico, subrayando todas las cursivas de nuestro blog
Imaginemos por ejemplo que queremos que en nuestro blog, cada vez que aparezca una palabra o frase en cursiva también aparezca subrayado, para darle más énfasis a lo que estamos remarcando. Además, como queremos que destaque, le vamos a poner al subrayado un grosor de 2px y también un color diferente.
Para ello, primero tendremos que inspeccionar nuestra página web, y ver cuál es el código que utiliza cuando ponemos algo en cursiva. Normalmente, si investigamos daremos con el elemento llamado em (lo verás así <em>) .
Entonces, para conseguir nuestro efecto en todas las cursivas, tendremos que -mediante css- decirle a nuestra plantilla que cada vez que aparezca el elemento em, le aplique el siguiente efecto: border-bottom: 2px solid #88b2ff;
En este caso hemos usado border-bottom, pero como hemos visto arriba, también lo podemos hacer con la opción de text-decoration.
Para conseguirlo, bastará con ir a nuestra web y en el menú apariencia/personalizar/css adicional pegar lo siguiente
em {
border-bottom: 2px solid #88b2ff;
}
Así, le estaremos diciendo a la página web básicamente que cada vez que haya algo en cursiva:
- Border bottom: 2px. Queremos un borde inferior de dos píxeles de grosor
- Border bottom: solid. Queremos que el borde inferior sea una línea recta y sólida.
- Border bottom: #88b2ff. Queremos que el color del borde inferior sea exactamente este #88b2ff
Sin más, esperamos que este pequeño tutorial te hay sido útil. Saludos desde el mejor blog del mundo este humilde blog.
Me llamo Carlos Martínez, y junto a mi pareja Elena estamos detrás de los contenidos de esta web. Sobre mí, decirte que hace unos años que dejé mi trabajo como fotoperiodista para dedicarme al mundo del diseño web, el SEO y los proyectos digitales.