Bagaimana membuat: garis pemisah teks

Bagaimana membuat garis pemisah teks responsif

langkah pertama - Tambahkan HTML:

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

langkah kedua - 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

penjelasan 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, di CSS, Anda untuk .divider pengaturan kelas beberapa gaya. Anda menetapkan ukuran font 30 piksel, menggunakan tata letak flex, dan menetapkan align-items: center; untuk membuat teks di tengah vertikal di dalam garis pemisah.

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

Lalu, atur jarak bawah, warna latar dan jarak di luar untuk menentukan gaya garis pemisah. Dalam contoh ini, warna garis pemisah adalah merah, dan ada beberapa jarak bawah dan jarak di luar.