HTML proporciona diferentes opciones de estilo para el texto. Subrayar el texto HTML es uno de ellos. El simple hecho de subrayar dibujará una línea recta debajo del texto sin ocupar la línea de abajo. En este tutorial, aprenderemos cómo subrayar el texto HTML con la etiqueta < u >, código CSS, clase CSS y establezca las propiedades y alternativas de subrayado.

Subrayar texto con < u > Etiqueta

HTML proporciona la etiqueta < u > para subrayar el texto dado en HTML. < u > es la etiqueta de inicio para subrayar y < / u > se usa para establecer el final del subrayado. Las etiquetas de subrayado se pueden utilizar para diferentes tipos de texto como hipervínculos, texto en negrita, etc. sin ningún problema. En el siguiente ejemplo, subrayaremos una sola palabra o una oración completa o un hipervínculo. La etiqueta < u > o subrayado HTML es compatible con los principales navegadores como Google Chrome, Mozilla Firefox, Microsoft Edge, Safari u Opera. .

Subrayar texto con atributo de decoración de texto CSS

CSS proporciona el atributo text-decoration para subrayar diferentes elementos HTML. Podemos utilizar el atributo text-decoration para subrayar el texto HTML. El atributo de estilo de decoración de texto se puede utilizar con diferentes etiquetas o elementos HTML. En el siguiente ejemplo, hemos utilizado la etiqueta < span > para seleccionar el texto y subrayarlo.

Establecer el color y el estilo del subrayado del texto

En algunos casos, el simple hecho de subrayar el texto HTML puede no ser suficiente. También podemos colorear o cambiar el estilo del subrayado. El atributo CSS text-decoration se puede usar para diseñar y colorear los subrayados con < u > etiqueta o sin ella. A continuación, proporcionaremos el color del subrayado del texto HTML como rojo, verde y el estilo como ondulado, discontinuo, punteado y doble.

wavy El estilo no creará una línea recta donde la línea será ondulada como ondas.

dashed El estilo creará un subrayado discontinuo.

dotted El estilo es similar al discontinuo pero los puntos serán más pequeños.

double el estilo pondrá dos subrayados donde el valor predeterminado es un subrayado simple.

El color rojo y el subrayado discontinuo se puede utilizar para expresar errores ortográficos, sintácticos o generales. También dotted

Utilice la clase CSS para subrayado de texto HTML

Escribir cada código CSS subrayado, una y otra vez, no es un buen trabajo. Se puede crear una clase CSS para diferentes casos de uso de subrayado y esta clase se puede utilizar para subrayado de texto HTML con otras etiquetas HTML. En el siguiente ejemplo, crearemos diferentes clases de CSS como underline-red, underline-green para crear texto subrayado fácilmente.