Hello temen-temen untuk postingan kali ini saya akan menshare headline (heading style). heading style biasanya digunakan untuk memperjelas antara judul dengan isi content pada suatu web. disini kita menggunakan pseudo element ::after dan ::before. Pseudo element ::before dan ::after digunakan untuk membuat element semu (pseudo) dengan posisi sebelum dan sesudah content dari element yang ditargetkan, dikatakan semu karena element ini tidak benar-benar ada dalam struktur html, namun tetap akan digenerate oleh browser sehingga akan tetap tampak. itu sedikit penjelasan tentang ::after dan ::before. tanpa basa-basi lagi kita langsung ke tutorialnya.
Langkah 1 buat file htmlnya (ingat dengan kodingannya):
Langkah 2 buat file cssnya (ingat dengan kodingannya):
Langkah 1 buat file htmlnya (ingat dengan kodingannya):
Langkah 2 buat file cssnya (ingat dengan kodingannya):
Hasilnya seperti dibawah ini:
Sekian dulu untuk postingan kali ini semoga bermanfaat. Jika memang masih membingungkan silahkan tinggalkan komentar pada kolom komentar dibawah.
Terima Kasih.
Referensi:
- codepen
- designlink.work
Komentar
Posting Komentar