Course recommendation:

How to create: text separator

CSS ile metin ayırıcısı nasıl oluşturulur öğrenin.
Lorem Ipsum
OR

}

AND

Yanıtlayıcı metin ayırıcısı nasıl oluşturulur

İlk Adım - HTML Ekleme:

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

İkinci Adım - CSS Ekleme:
  .divider {
  font-size: 30px;
  sınıfı bazı stiller ayarladı. Metin boyutunu 30 piksel olarak ayarladınız, flex düzenini kullandınız ve
margin: 5px;
display: flex;
  .divider::before, .divider::after {
  flex: 1;
  content: '';
  padding: 3px;
  background-color: red;
margin: 5px;

}

Deneyin

Örnek açıklaması:

Bu örnekte, CSS ile bir metin ayırıcısı nasıl oluşturulacağını öğreneceksiniz. Özellikle, bu etki HTML ve CSS'nin birleşimi ile elde edilir.

Öncelikle, HTML'de "divider" adlı bir sınıfı olan bir <div> elementi eklemeniz gerekiyor ve içinde göstereceğiniz metni (bu örnekte metin "Lorem Ipsum"dir) yerleştirin. .divider Sonra, CSS'de, sınıfı bazı stiller ayarladı. Metin boyutunu 30 piksel olarak ayarladınız, flex düzenini kullandınız ve align-items: center;

Sonra, sanal elementleri kullanarak metni ayırıcı içinde dikey olarak ortalamak için. ::before ve ::after ayırıcıya her iki tarafa da süs eklemek için. flex: 1 onların .divider elemenin metin dışındaki tüm boşlukları. content: '' Bu iki sanal elementin boş olduğundan ve içerik içermediğinden emin olun.

Sonra, iç boşluk, arka plan rengi ve dış boşluk ayarlayarak ayırıcı stili tanımlayın. Bu örnekte, ayırıcı rengi kırmızıdır ve bazı iç boşluk ve dış boşluklar vardır.