Bagaimana membuat: garis pemisah teks

Belajar bagaimana membuat garis pemisah teks menggunakan CSS.

Lorem Ipsum
OR
AND

Coba sendiri

Bagaimana membuat garis pemisah teks responsif

Pertama - Tambahkan HTML:

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

Ketiga - Tambahkan CSS:

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

Coba sendiri

Pengertian contoh:

Contoh ini mengajarkan bagaimana menggunakan CSS untuk membuat garis pemisah teks. Khususnya, ia menggunakan kombinasi HTML dan CSS untuk mencapai efek ini.

pertama, Anda perlu menambahkan elemen <div> dengan nama kelas "divider" di HTML dan letakkan teks yang ingin Anda tampilkan (dalam contoh ini, teks adalah "Lorem Ipsum").

lalu, dalam CSS, Anda untuk .divider class setting menetapkan beberapa gaya. Anda menetapkan ukuran huruf 30 piksel, menggunakan layout flex, dan menetapkan align-items: center; untuk membuat teks di tengah garis pemisah vertikal.

kemudian, Anda menggunakan pseudo-element ::before dan ::after untuk menambahkan hiasan di sisi kedua garis pemisah. Kedua pseudo-element ini disetel flex: 1 untuk membuat mereka mengambil .divider semua ruang di dalam elemen kecuali teks. Anda juga menetapkan content: '' Pastikan kedua pseudo-element ini kosong, tidak mengandung konten apapun.

Lalu, tetapkan margin dalam, warna latar dan margin luar untuk menentukan gaya garis pemisah. Dalam contoh ini, warna garis pemisah adalah merah, dan ada beberapa margin dalam dan luar.