Como criar: linha de separação de texto

Como criar uma linha de separação de texto responsiva

Primeiro passo - Adicionar HTML:

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

Segundo passo - Adicionar CSS:

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

Experimente você mesmo

Explicação do exemplo:

Este exemplo ensina como usar CSS para criar uma linha de separação de texto. Especificamente, ele usa a combinação de HTML e CSS para alcançar esse efeito.

Primeiro, você precisa adicionar um elemento <div> com a classe "divider" no HTML e colocá-lo dentro do texto que você deseja exibir (no exemplo, o texto é "Lorem Ipsum").

Em seguida, no CSS, você configurou .divider A classe configurou alguns estilos. Você configurou o tamanho da fonte para 30 pixels, usou alinhamento flexível e configurou align-items: center; para centralizar verticalmente o texto na linha de separação.

Em seguida, você usou o elemento pseudo ::before e ::after para adicionar decorações aos lados da linha de separação. Ambos os elementos pseudo estão configurados flex: 1 para que eles ocupem .divider Todo o espaço dentro do elemento, exceto o texto. Você também configurou content: '' Para garantir que esses elementos pseudo sejam vazios e não contenham nenhum conteúdo.

Então, defina o estilo da linha de separação ajustando o espaçamento interno, cor de fundo e margem externa. Neste exemplo, a cor da linha de separação é vermelha e há alguns espaçamentos internos e externos.