Sådan skaber du: Tekstskillelinje

Sådan skaber du responsiv tekstskillelinje

1. Trin - Tilføj HTML:

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

2. Trin - Tilføj CSS:

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

Prøv det selv

Eksempel forklaring:

Dette eksempel viser, hvordan du bruger CSS til at skabe en tekstskillelinje. Specifikt bruger det en kombination af HTML og CSS til at opnå dette effekt.

Først skal du tilføje en <div>-element med klassenavn "divider" i HTML og placere den ønskede tekst (i dette eksempel er teksten "Lorem Ipsum") i det.

derefter i CSS, har du indstillet .divider class har nogle stilarter. Du har indstillet skriftstørrelsen til 30 pixel, brugt flex-layout og indstillet align-items: center; for at centere teksten lodret i skillelinjen.

derefter brugte du pseudo-element ::before og ::after for at tilføje dekorationer på begge sider af skillelinjen. Begge disse pseudo-elementer er indstillet flex: 1 for at få dem til at optage .divider Alt rum i elementet bortset fra teksten. Du har også indstillet content: '' For at sikre, at disse to pseudo-elementer er tomme og ikke indeholder nogen indhold.

Så, indstil indre margen, baggrundsfarve og yderligere margen for at definere skillelinjens stil. I dette eksempel er skillelinjens farve rød, og der er nogle indre og yderligere margener.