Come creare: linea di separazione di testo

Come creare una linea di separazione di testo responsive

Primo passaggio - Aggiungi HTML:

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

Secondo passaggio - Aggiungi CSS:

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

Prova tu stesso

Esempio di spiegazione:

Questo esempio ti insegna come creare una linea di separazione di testo utilizzando CSS. In particolare, utilizza la combinazione di HTML e CSS per ottenere questo effetto.

Prima di tutto, devi aggiungere un elemento HTML <div> con il nome della classe "divider" e posizionare al suo interno il testo che desideri visualizzare (in questo esempio, il testo è "Lorem Ipsum").

Poi, nel CSS, hai impostato .divider Le impostazioni di classe hanno definito alcuni stili. Hai impostato la dimensione del font a 30 pixel, usato il layout flex, e impostato align-items: center; per far sì che il testo sia centrato verticalmente nella linea di separazione.

Poi, hai usato i pseudo-elementi ::before e ::after per aggiungere decorazioni laterali alla linea di separazione. Entrambi i pseudo-elementi sono stati impostati flex: 1 per farli occupare .divider Tutta la spazio all'interno dell'elemento tranne il testo. Hai anche impostato content: '' Assicurati che questi due pseudo-elementi siano vuoti, senza contenere alcun contenuto.

Poi, impostare i margini interni, il colore di sfondo e i margini esterni per definire lo stile della linea di separazione. In questo esempio, il colore della linea di separazione è rosso e ci sono margini interni ed esterni.