MoreLesson 261Preview gratis
Text Divider
Lesson ini bagian dari How To · Semua level
Ringkasan
Text divider adalah garis horizontal yang di tengahnya terdapat teks, misalnya 'atau' pada formulir. Teknik modern memakai flexbox: teks menjadi item tengah, sedangkan garis dibuat dengan pseudo-element ::before dan ::after yang mengisi ruang tersisa. Hasilnya tetap rapi saat lebar layar berubah.
Poin kunci
- Flexbox dengan align-items: center menyejajarkan teks dan garis secara vertikal.
- Pseudo-element ::before dan ::after dengan flex: 1 mengisi ruang di kiri dan kanan.
- Gap memberi jarak antara garis dan teks.
- Teks divider sebaiknya tetap dibungkus elemen agar mudah diatur dan diakses.
Materi lengkap
Contoh kode dan kuis
Materi lengkap, contoh kode, dan kuis tersedia untuk pelanggan. 5 soal.