Como criar um divisor com texto em CSS

2a atrás

undefined

Primeiro, adicione uma div com a classe "divider" em seu HTML:

<div class="divider">ou</div>

Em seu CSS, crie dois pseudo-elementos, representando a parte inicial do divisor e a parte final. O texto do divisor ficará no centro dessa forma.

.divider::after, .divider::before {
  background-color: #000000;
  content: '';
  height: 1px;
  margin: 0 1em;
  width: 100%;
}

Por fim, vamos colocar o conteúdo de "divider" lado a lado com display: flex e alinhar tudo no meio com align-items: center.

.divider {
  display: flex;
  align-items: center;
}

Esse será o código final:

<!DOCTYPE html>
<html>
<head>
  <style>
    .divider {
      display: flex;
      align-items: center;
    }
    
    .divider::after, .divider::before {
      background-color: #000000;
      content: '';
      height: 1px;
      margin: 0 1em;
      width: 100%;
    }
  </style>
</head>
<body>
  <div class="divider">ou</div>
</body>
</html>

#CSS

Comentários (0)