Jak tworzyć: linia oddzielająca tekst

Naucz się, jak używać CSS do tworzenia linii oddzielającej tekstu.

Lorem Ipsum
OR
AND

Spróbuj sam!

Jak tworzyć responsywne linie oddzielające tekst

Krok 1 - Dodaj HTML:

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

Krok 2 - Dodaj CSS:

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

Spróbuj sam!

Wyjaśnienie przykładu:

Ten przykład pokazuje, jak używać CSS do tworzenia linii oddzielającej tekstu. Konkretnie, używa kombinacji HTML i CSS, aby osiągnąć ten efekt.

Po pierwsze, musisz dodać do HTML element <div> z klasą "divider" i umieścić w nim tekst, który chcesz wyświetlić (w tym przykładzie, tekst to "Lorem Ipsum").

następnie, w CSS, ustawiłeś .divider ustawiłeś kilka stylów. Ustawiłeś rozmiar czcionki na 30 pikseli, użyłeś układu flex, oraz ustawiłeś align-items: center; aby wyrównać tekst wertykalnie w środku linii oddzielającej.

następnie, użyłeś pseudoelementu ::before i ::after aby dodać ozdobę obu stron linii oddzielającej. Oba te pseudoelementy są ustawione flex: 1 aby one zajmowały .divider wszystkie przestrzenie w elemencie poza tekstem. Ustawiłeś również content: '' Upewnij się, że te dwie pseudoelementy są puste i nie zawierają żadnych treści.

Następnie, ustaw wewnętrzne marginesy, kolor tła i zewnętrzne marginesy, aby zdefiniować styl linii oddzielającej. W tym przykładzie, kolor linii oddzielającej to czerwony, a także istnieją pewne wewnętrzne i zewnętrzne marginesy.