Miten luodaan: Tekstierotus

Miten luodaan responsiivinen tekstierotus

Ensimmäinen vaihe - Lisää HTML:

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

Toinen vaihe - Lisää CSS:

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

Kokeile itse

Esimerkki selitys:

Tämä esimerkki opastaa sinua, miten CSS:llä luodaan tekstierotus. Tarkemmin sanottuna se käyttää HTML:n ja CSS:n yhdistelmää tämän efektin saavuttamiseksi.

Ensinnäkin sinun täytyy HTML:ssä lisätä <div>-elementti, jolla on luokka "divider", ja siinä asetettava teksti (tässä esimerkissä teksti on "Lorem Ipsum").

Sitten CSS:ssä asetettiin .divider Lisäksi luokka-asetuksissa asetettiin fonttikoko 30 pikseliä, käytettiin flex-rakennetta ja asetettiin align-items: center; jotta teksti keskittyisi vertikaalisesti erotuslinjassa.

Sitten käytit tekoelementtiä ::before ja ::after lisätäksesi erotuslinjan molemmin puolin koristelua. Molemmat tekoelementit asetettiin flex: 1 jotta ne täyttäisivät .divider Elementin kaikki tekstiä lukuun ottamatta oleva tila. Sinä asettelit content: '' Varmista, että nämä kaksi tekoelementtiä ovat tyhjiä eivätkä sisällä minkäänlaista sisältöä.

Sitten aseta sisäviive, taustaväri ja ulkoviive määrittääksesi erotuslinjan tyylin. Tässä esimerkissä erotuslinjan väri on punainen, ja sillä on joitakin sisä- ja ulkoviiveitä.