Los estilos de subrayar el texto siempre han sido bastante limitantes.La forma más común de subrayar el texto en la web es el uso de CSS “TEXT-DECORACIÓN: Subrayar”.Divin le permite implementar y estilizar este tipo de subrayado en la configuración del módulo Divi Builder.Pero este método subrayador estándar viene con limitaciones en términos de estilo y soporte de navegador cruzado.Por supuesto, en la mayoría de los casos, el subrayado del texto no debe ser complicado.Por ejemplo, resaltar todos los enlaces en su sitio para mostrar que están haciendo clic es una aplicación estándar que no necesariamente necesita métodos alternativos.Pero si desea tomar el subrayado en el siguiente nivel, esta publicación puede ayudarlo.
En este tutorial, le presentaré cómo aplicar algunos estilos alternativos para subrayar su texto en el Div. Le mostraré el método estándar utilizando las opciones de divin integradas para subrayar el texto. Y también le mostraré cómo usar los bordes inferiores como un método alternativo para subrayar el texto. El uso de un borde inferior no solo le brinda más control sobre el estilo, sino que también se acepta en todos los navegadores. Vamos a empezar. Subrayando el texto con la decoración del texto (método común) La forma más común y simple de enfatizar el texto es usar la propiedad CSS para decorar el texto. De hecho, DIV le permite estilizar el texto utilizando este método fácilmente en las opciones construidas de un módulo. Simplemente busque el estilo de fuente de texto y seleccione el icono “U” para implementar la decoración de texto subrayada. Una vez seleccionado el estilo de fuente subrayado, también tendrá la opción de personalizar el color y el estilo del subrayado. Esto le permite tener un color subrayado diferente del color del texto real. Y puede elegir entre los siguientes estilos de subrayado:

Sólido
Doble
Punteado
Discontinuos
Acanalado
Incluso puede apuntar al estilo subrayado de las conexiones dentro del texto del cuerpo. Esto le brinda más control sobre el diseño al usar el módulo de texto. Simplemente seleccione la pestaña Fuente del enlace en el cambio de la categoría de diseño de texto. Para el estilo de enlace de fuente, elija “subrayado”. Luego puede personalizar el color y el estilo de subrayar el enlace en consecuencia.

La decoración del texto enfatiza las limitaciones del estilo carece de la capacidad de ajustar el ancho y la posición de la línea Desafortunadamente, al agregar la decoración del texto: subraye la propiedad CSS utilizando la configuración incorporada, no hay opción para ajustar el ancho de la línea o la posición de la línea. El ancho de la línea es relevante para el tamaño de la fuente, por lo que aumentará a medida que aumente el tamaño de la fuente. Y debido a que la posición de las sub -líneas está en la línea base, los descendientes (letras minúsculas que caen debajo de la línea base) entrarán en la línea causando algunas inconsistencias, especialmente con las palabras que tienen muchos descendientes (como “tipografía “). Es posible que esta limitación no sea un problema si usa todo el texto en mayúsculas, porque no tendrá descendientes de los que preocuparse. Sería bueno si hubiera un soporte para ajustar el ancho del subrayado y la posición de las presentaciones, pero por ahora no tenemos suerte. No tiene soporte para el navegador de Internet Explorer no acepta la propiedad de la decoración de texto o color de decoración de texto, de modo que el estilo subrayado (doble, punteado, puntiagudo, etc.) y el subrayador del color no se puedan personalizar. Safari no acepta la propiedad en estilo decorativo de texto, pero puede cambiar el color subrayado.

Esta falta de apoyo no se limita al Div. Ninguno de los CSS personalizados lo ayudará. Subraye el texto usando un borde inferior si está buscando una solución alternativa para subrayar los estilos de texto, la mejor opción en mi opinión es usar un borde inferior. Aquí hay algunas buenas razones para hacer esto:

Un borde acepta ocho estilos de diferentes bordes para enfatizar su subrayado, que incluye: puntuado, interrumpido, sólido, doble, zanja, cresta, insertado y comenzar. Puede personalizar el ancho (grosor) de un borde del tamaño de la fuente.
Puede colocar los bordes para estar más cerca o más lejos del texto.
Puede agregar cualquier color deseado a los bordes.
Los estilos fronterizos son aceptados por todos los navegadores.
Limitaciones al uso de bordes inferiores para subrayar
Limitado a una sola línea de texto en elementos de bloque. Pero hay formas a este respecto (ver más abajo).
Posicionado completamente bajo descendientes y poco difícil de obtener la posición correcta (pero alcanzable).
Comprender la diferencia entre los elementos de bloque y los elementos en línea para comprender cómo están subrayando los bordes, debe conocer la diferencia entre los elementos de bloque y los elementos en línea.
Elementos de bloque Los elementos de bloque cubrirán automáticamente todo el ancho de su contenedor (a menos que se establezca un ancho personalizado) y comenzará en una nueva línea. Los sitios web (incluidos los construidos con Div) están llenos de elementos de bloque. Algunos ejemplos de elementos de bloque comunes incluyen:
Secciones de la división, filas, módulos (div)
texto o párrafos (p)
Títulos (H1, H2, H3, H4, H5, H6)
Listas (OL, UL)
Al agregar un borde inferior para bloquear los elementos, el borde se parará debajo de todo el bloque. Entonces, si tiene un párrafo de texto (P) o un título (H1) que se divide en dos o más líneas, el borde inferior se aplicará solo en la parte inferior del bloque, no a las filas de texto individuales.
Aquí hay un ejemplo de cómo agregar un borde inferior a un elemento de bloque de título H1 cuando el texto se rompe en varias líneas. Incluso si CSS se dirige a la etiqueta H1, la línea solo se aplica al elemento de bloque. Por lo tanto, la línea se aplica solo en la parte inferior y no en cada línea individualmente. Elementos en línea a diferencia de los elementos de bloque, los elementos en línea se pueden dividir en varias líneas. Entonces, si agrega un borde inferior a un elemento en línea (como un enlace, por ejemplo), se aplicará el borde inferior incluso si la conexión se divide en una nueva línea. También puede ajustar el revestimiento de los elementos en línea sin afectar la altura de la línea de texto del cuerpo, lo cual es excelente para colocar la línea subrayada.
Aquí hay un ejemplo de enlaces (que son elementos en línea por defecto) que han subrayado el borde inferior.
Simplemente dicho, los elementos en línea pueden tener el borde inferior subrayado cuando se rompen en varias líneas, y los elementos de bloque no. Cómo agregar el borde inferior a una sola línea de texto (un elemento de bloque) Aquí hay un ejemplo de cómo agrega un borde inferior a una sola línea utilizando la configuración construida del módulo de texto. Esta opción funciona mejor para los encabezados porque limitará el texto a una sola línea. Cree una nueva sección con una fila con una columna. Luego agregue un módulo de texto con el siguiente contenido:
Subrayando la tipografía

Luego actualice la configuración del módulo de texto de la siguiente manera:
Tamaño de texto de texto: 46 PX (escritorio), 40 px (tableta), 26 PX (teléfono)

La altura de la línea de texto: 1.8em
Ancho: 517 PX (escritorio), 450 PX (tableta), 293 PX (teléfono)
Ancho del borde inferior: 2 pxculor del Chenar inferior: # 0C71C3
El estilo del margen inferior: puntiagudo
Como puede ver, el borde se puede estilizar con el ancho, el color y el estilo. Debido a que el borde inferior se aplica al módulo, es necesario ajustar el ancho del módulo al mismo ancho del texto. Por lo tanto, deberá cambiar el tamaño del texto y el ancho del módulo en consecuencia.
Cómo agregar el borde inferior debajo de los elementos del bloque (como los títulos) que se dividen entre líneas como se mencionó anteriormente, los elementos de bloqueo como los valores (H1, H2, etc.) no permiten que el margen inferior aplique en la línea a cada línea interrupción. Para resolver esto, simplemente podemos envolver el texto con una etiqueta SPAN. Un intervalo le permite agrupar elementos en línea (como un grupo de texto) juntos para agregar el estilo de esos elementos. Entonces, si queremos un borde inferior con una etiqueta H1 (un elemento de bloque), podemos envolver el texto dentro de la etiqueta H1 con una etiqueta de tramo adicional. Luego podemos agregar el estilo de subrayar el borde inferior a la etiqueta del tramo. Esto nos permitirá enfatizar el texto de la etiqueta H1 (o porciones de ella) incluso cuando se rompe en otra línea.
Aquí hay un ejemplo de cómo agrega un borde inferior para bloquear elementos (como valores) que se dividen en varias líneas de texto utilizando CSS personalizado. Primero, agregue una nueva sección con una fila con una columna. Luego agregue un módulo de texto en una fila. En el cuadro de contenido, reemplace el texto implícitamente simulado con el siguiente:

Este es un encabezado con estilo subrayador de subrayador de borde inferior una etiqueta de span

Como agregaremos un resultado final subrayado, aumentemos la altura de la dirección H1 de la siguiente manera:
Luego agregue el siguiente CSS de identificación personalizado en la pestaña avanzada: ID CSS: Border-Onderine


Luego abra el modo de configuración de la página y agregue el siguiente CSS personalizado: .Border-Ileline Span {
Border-Bottom: 2px Dable #0C71C3;
Relleno: 0.1em 0;
}

Este estilo de borde inferior se aplica a los elementos de la etiqueta del tramo. Y debido a que la etiqueta SPAN es un elemento en línea, el énfasis se aplicará al texto en cada línea.

La propiedad en el borde inferior se puede personalizar de todos modos que desee. El primer valor (2px) establece el grosor (o ancho) del borde. El segundo valor (puntuado) establece el estilo de borde. Recuerde, también puede usar los siguientes estilos de borde: perforados, punteados, dobles, ranuras, cresta, inserción y inicio. Y el tercer valor (# 0C71C3) establece el color del borde. También puede cambiar el CSS de llenado personalizado junto con el valor de la altura de la línea de texto de las opciones de módulo de texto incorporadas para obtener el espacio también. Si no necesita la etiqueta SPAN y desea convertir toda la etiqueta H1 en un elemento en línea, puede usar este CSS en la configuración de la página: .Border-Rimline H1 {
Border-Bottom: 2px Dable #0C71C3;
Relleno: 0.1em 0;
Pantalla: en línea;
}

Observe que este CSS está dirigido a la etiqueta H1. Además de los bordes inferiores y los estilos de llenado, “Display: Inline” cambia la etiqueta H1 en un elemento que permite enfatizar el texto H1 en varias líneas. Agregar una línea de subrayado el borde inferior a los enlaces en línea en la división aquí es un ejemplo de cómo agrega una parte inferior de su enlace a su CSS personalizado. Primero cree una nueva sección con una fila con una columna y agregue un módulo de texto en una fila. Luego use el editor Wysiwyg para agregar algunos enlaces al texto del cuerpo, para que tenga algunos enlaces para trabajar. Luego agregue una clase CSS personalizada a la pestaña avanzada, de la siguiente manera: CSS: Border-Verline
Ahora abra la configuración de la página y agregue los siguientes CSS personalizados para aplicar el borde inferior a todos los enlaces en el módulo de texto. .Border-subline a {
Border-Bottom: 1px Solid #33333;
Relleno: 0.1em 0;
}
La propiedad en el borde inferior se puede personalizar de todos modos que desee. El primer valor (1 PX) establece el grosor (o ancho) del borde. El segundo valor (sólido) establece el estilo del borde. Recuerde, también puede usar los siguientes estilos de borde: perforados, punteados, dobles, ranuras, cresta, inserción y inicio. Y el tercer valor (# 33333) establece el color del borde. Entonces, si desea una línea subrayada de borde inferior, que tiene un ancho de 2 PX, con un estilo punteado y un color diferente, puede reemplazar estos valores con algo como esto: Border-Bottom: 2px Dable #0C71C3;

El valor de llenado también se puede ajustar para colocar el borde subrayado verticalmente. Por lo tanto, si desea que la línea esté debajo del texto, puede aumentar el valor de llenado a algo de la siguiente manera: Pading: 0.3em 0; también puede usar este relleno personalizado junto con el valor de la línea de texto en el Built -in. Opciones del módulo de texto para obtener espaciado también. Y dado que las conexiones son elementos en línea, la línea subrayada permanece en los enlaces que se dividen entre líneas.

¿Pero sobre los divisores? Si desea ser verdaderamente creativo, subrayando líneas de texto únicas (elementos de bloque), puede usar el módulo divisor en cualquier momento. El módulo divisor tiene muchas opciones construidas, como estilo, altura, ancho, fondos, borde, sombra y más. Incluso puede apilar separadores uno encima del otro para un aspecto aún más personalizado. Aquí hay un ejemplo rápido del modo divisor utilizado para enfatizar el texto con una doble línea con un fondo de gradiente. Simplemente agregue un módulo divisor directamente en un módulo de texto que contenga su texto y luego actualice lo siguiente:
Color izquierdo del gradiente de fondo: # 2B87DA
Color derecho del gradiente de fondo: # 29C4A9
Tipo de gradiente: lineal

Dirección de gradiente: 90 grados

Color: #ffffff

Peso del divisor: 2 PX

Altura: 2 PX
Ancho: 400 PX (esto tendrá que ajustarse al ancho de texto anterior)
Revestimiento personalizado: 5 px arriba, 5 px abajo