Hoe te maken: tekstscheidingsteken

Hoe een responsieve tekstscheidingsteken te maken

Eerste stap - Voeg HTML toe:

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

Tweede stap - Voeg CSS toe:

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

Probeer het zelf uit

Voorbeeldverklaring:

Dit voorbeeld laat je zien hoe je een tekstscheidingsteken kunt maken met CSS. Specifiek gebruikt het een combinatie van HTML en CSS om dit effect te bereiken.

Eerst moet je in HTML een <div> element toevoegen met de klasse naam "divider" en daarin de tekst plaatsen die je wilt weergeven (in dit voorbeeld is de tekst "Lorem Ipsum").

Vervolgens, in CSS, heb je voor .divider De klasse heeft enkele stijlen ingesteld. Je hebt de lettergrootte ingesteld op 30 pixels, flex-indeling gebruikt en align-items: center; om de tekst horizontaal in het midden van de scheidingslijn te centreren.

Daarna gebruikte je pseudoelementen ::before en ::after om decoraties aan beide kanten van de scheidingslijn toe te voegen. Beide pseudoelementen zijn ingesteld flex: 1 om hen te laten innemen .divider Al het lege ruimte in het element, naast de tekst. Je hebt ook ingesteld content: '' Zorg ervoor dat deze twee pseudoelementen leeg zijn en geen inhoud bevatten.

Vervolgens, stel de binnenvulling, achtergrondkleur en marges in om het stijl van de scheidingslijn te definiëren. In dit voorbeeld is de kleur van de scheidingslijn rood en er zijn enkele binnenvulling en marges.