Belajar Cara Penggunaan Before After dalam CSS
Kali ini kita akan mempelajari tentang pseudo element pada css. before dan after merupakan sebuah Pseudo element , fungsi before dan :after pada css sendiri memungkinkan kita menambahkan suatu konten baik sebelum maupun sesudah suatu tag HTML hanya melalui Css saja tanpa menambahkan suatu elemen apapun di halaman HTML tersebut. Pseudo elemen adalah bagian dari sebuah elemen yang dapat kita beri style secara terpisah. Pseudo elemen sendiri bersifat semu namun Pseudo elemen ini berbeda dengan pseudo class dimana pada pseudo elemen, elemen seperti tidak ada pada halaman HTML namun sesungguhnya elemen tersebut ada cuma tidak terlihat sedangkan pada pseudo class hanya classnya saja yang bersifat semu namun elemen html lainya bersifat nyata . Pseudo elemen sendiri jenisnya ada banyak namun pada artikel kali ini kita akan membahas tentang penggunaan pseudo elemen ::before dan ::after.
Fungsi before dan :after pada css
Dalam penggunaanya pseudo element pada css ::before dan ::after ini biasa disertakan dalam Css sehingga kita tidak perlu menambah elemen apapun di script HTML nya. Perbedaan penggunaan kedua elemen ini adalah jika elemen ::before digunakan untuk menambahkan suatu elemen sebelum tag HTML yang akan kita jadikan objek, sedangkan elemen ::after digunakan untuk menambahkan suatu elemen setelah tag HTML yang kita jadikan objek. Ada banyak contoh penggunaan elemen ::before dan ::after disaat membangun suatu halaman website diantaranya seperti Membuat Image Icon dibagian navbar brand, membuat breadcrumbs dan masih banyak lagi. Berikut akan saya contohkan melalui scribt sederhana yang dapat kalian coba untuk mengetahui penggunaan elemen ::before dan ::after ini :
- Contoh Scribt menggunakan elemen ::before
<!DOCTYPE html>
<html>
<head>
<style>
//penggunaan elemen before
h1::before {
content: "Tambahan";
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Kodekreasi.com</h1>
</body>
</html>
Hasilnya adalah sebagai berikut :
Penjelasan :
Dari scribt diatas diketahui jika kita hanya mempunyai 1 buah pseudo element pada css pada elemen didalam tag HTML tersebut yaitu berupa tag heading dengan teks Kodekreasi.com. Namun dari hasil diatas diketahui jika terdapat tulisan teks Tambahan berwarna merah dengan backroud kuning dimana elemen tersebut tidak tercantum pada script HTML nya . Hal tersebutlah yang dimaksud dengan elemen ::before dimana kita dapat menambahkan sebuah elemen pada tag HTML tertentu tanpa mencantumkan elemen tersebut kedalam scribt HTML nya. Untuk mengetahui lebih lanjut mengenai hasil dari scribt tersebut saya mencoba meng inspect elemennya dengan cara klik kanan lalu pilih inspect elemen dan didapat hasil seperti berikut dimana didalam tag H1 pada HTML terdapat tambahan elemen ::before sebelum tulisan Kodekreasi.com :
2. Contoh scribt menggunakan elemen ::after
<!DOCTYPE html>
<html>
<head>
<style>
h1::after {
content: "Tambahan after";
background-color: yellow;
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Kodekreasi.com</h1>
</body>
</html>
Penjelasan :
Dari scribt diatas tidak jauh berbeda dari scribt sebelumnya hanya saja pada scribt ini kita mengganti elemen ::before menjadi elemen ::after sehingga tulisan tambah tadi menjadi dibelakan tulisan Kodekreasi letaknya dan ketika kita inspect elemennya akan didapati hasil elemen baru yaitu elemen ::after setelah tulisan Kodekreasi.com seperti berikut ini :
Kesimpulan :
Dari penjelasan yang telah saya berikan diatas tadi dapat disimpulkan bahwa elemen ::before digunakan untuk menambahkan sebuah elemen baru sebelum konten yang akan dijadikan objek pada halaman HTML tanpa menambahkanya ke scribt htmlnya langsung sedangkan elemen ::after digunakan untuk menambahkan sebuah elemen baru setelah konten yang akan dijadikan objek pada halaman HTML tanpa menambahkanya ke scribt htmlnya langsung.
sekian artikel kali ini mengenai fungsi before dan :after pada css jangan lupa baca artikel saya yang lain.
Fungsi Margin dan Padding pada CSS - KodeKreasi
16 Januari 2022[…] Baca Juga : Cara Penggunaan Before After dalam CSS […]