Cómo crear: línea de separación de texto

Cómo crear una línea de separación de texto sensible al tamaño de la pantalla

Primer paso - Agregar HTML:

<div class="divider">Lorem Ipsum</div>

Segundo paso - Agregar CSS:

.divider {
  font-size: 30px;
  display: flex;
  align-items: center;
}
.divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
  margin: 5px;
}

Prueba personal

Ejemplo de explicación:

Este ejemplo te enseña cómo crear una línea de separación de texto utilizando CSS. Específicamente, utiliza la combinación de HTML y CSS para lograr este efecto.

Primero, necesitas agregar un elemento <div> con el nombre de clase "divider" en HTML y colocar en él el texto que deseas mostrar (en este ejemplo, el texto es "Lorem Ipsum").

Luego, en CSS, configuraste .divider La configuración de la clase estableció algunos estilos. Estableciste el tamaño de fuente en 30 píxeles, utilizaste el diseño flex y configuraste align-items: center; para centrar verticalmente el texto en la línea de separación.

Luego, utilizaste el elemento pseudo ::before y ::after para agregar decoraciones a los lados de la línea de separación. Ambos elementos pseudo tienen configurados flex: 1 para que ocupen .divider Todo el espacio del elemento, excepto el texto. También configuraste content: '' Para asegurarse de que estos elementos pseudo sean vacíos, sin contener ningún contenido.

Luego, configure el relleno interno, el color de fondo y el margen para definir el estilo de la línea de separación. En este ejemplo, el color de la línea de separación es rojo y tiene algunos relleno interno y margen.