Wie man erstellt: Texttrennlinie

Wie man eine responsive Texttrennlinie erstellt

Schritt 1 - HTML hinzufügen:

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

Schritt 2 - CSS hinzufügen:

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

Versuchen Sie es selbst

Beispiel Erklärung:

Dieser Beispiel zeigt Ihnen, wie Sie eine Texttrennlinie mit CSS erstellen. Genauer gesagt, es verwendet die Kombination aus HTML und CSS, um dieses Effekt zu erreichen.

Zunächst müssen Sie in HTML einen <div>-Element mit der Klasse "divider" hinzufügen und darin den Text platzieren, den Sie anzeigen möchten (in diesem Beispiel ist der Text "Lorem Ipsum").

dann, in CSS, haben Sie für .divider Die Klasse hat einige Stile eingerichtet. Sie haben die Zeichengröße auf 30 Pixel gesetzt, Flex-Layout verwendet und align-items: center; um den Text in der Trennlinie vertikal zentral auszurichten.

dann haben Sie Pseudo-Elemente verwendet ::before und ::after um Dekorationen an beiden Seiten der Trennlinie hinzuzufügen. Beide Pseudo-Elemente sind mit flex: 1 um sie ausfüllen zu lassen .divider der gesamte Raum im Element, abgesehen vom Text. Sie haben auch content: '' Um sicherzustellen, dass diese zwei Pseudo-Elemente leer sind und keine Inhalte enthalten.

Dann, stellen Sie den Innenabstand, die Hintergrundfarbe und den Außenabstand ein, um den Stil der Trennlinie zu definieren. In diesem Beispiel ist die Farbe der Trennlinie rot und es gibt einige Innen- und Außenabstände.