Allhamdulillah kita masih berjumpa lagi di di awal bulan ini, oke langsung saja pada artikel kali ini kita masih membahas tentang selector bagaimana Cara menggunakan pseudo element selector before dan after. Pseudo element selector ::before, dan ::after dikenal juga sebagai selector ‘generated content’. Karena dengan menggunakan kedua selector ini kita bisa menyisipkan konten baru ke dalam isi halaman, apakah itu berupa teks, gambar, atau bahkan sebuah artikel yang terdiri dari beberapa paragraf. Oke jangan kemana-mana simak terus ya teman-teman.
Oke langsung saja Cara menggunakan pseudo element selector before dan after. Selector ::before digunakan untuk menambahkan konten sebelum element HTML, sedangkan selector ::after digunakan untuk menambahkan konten setelah element HTML. Untuk dapat menambahkan konten ini, selector ::before dan ::after memiliki property khusus, yakni: content.
Mari kita lihat cara penggunaan selector ::before pada kode HTML berikut ini:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
a::before{
content: "Sejarah ";
}
</style>
</head>
<body>
<h2>Daftar Kota</h2>
<ul>
<li><a href="padang.html">Kota Padang</a></li>
<li><a href="medan.html">Kota Medan</a></li>
<li><a href="jakarta.html">Kota Jakarta</a></li>
<li><a href="makassar.html">Kota Makassar</a></li>
</ul>
</body>
</html>
Jika melihat dari kode HTMLnya, setiap list hanya berisi nama-nama kota, namun ketika dijalankan di web browser, terdapat penambahan kata “Sejarah” di awal masing-masing list. Ini didapat dari penggunaan selector ::before dan property content: “Sejarah “. Selector a::before berarti: isi dari property content akan ditambahkan sebelum tag <a>.
Bagaimana dengan selector ::after? Cara penggunaannya sama saja, seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
a::after{
content: " (sejarah dan perkembangannya)";
}
</style>
</head>
<body>
<h2>Daftar Kota</h2>
<ul>
<li><a href="padang.html">Kota Padang</a></li>
<li><a href="medan.html">Kota Medan</a></li>
<li><a href="jakarta.html">Kota Jakarta</a></li>
<li><a href="makassar.html">Kota Makassar</a></li>
</ul>
</body>
</html>
Kali ini saya menambahkan teks “(sejarah dan perkembangannya)” di akhir tag <a>. Perlu menjadi perhatian bahwa generated content ini berada di luar struktur DOM. Oleh karena itu konten yang dihasilkan dengan cara ini akan susah diakses, termasuk dari mesin pencari seperti Google. Generated content sebaiknya hanya digunakan mempercantik tampilan konten, dan bukan sebagai konten utama. Bagaimana teman-teman sangat menarik ya, sebenarnnya masih ada lagi penjelasan tentang Cara menggunakan pseudo element selector before dan after. oke akan saya bahas pada pertemuan berikutnya terimakasih.
The post Cara Menggunakan Pseudo Element Selector Before dan After appeared first on Kursus Website Terbaik.