Kemarin kita sudah membahasnya tapi saya rasa saya ingin menambahkan sedikit lagi supaya teman-teman lebih paham lagi mengenai pseudo element selector before dan after, maka dari itu disini saya buat judul dengan nama lanjutan dari pseudo element selector before dan after. jika teman-teman baru saja bergabung dengan kami teman-teman bisa kunjungi artikel saya sebelumnya ya teman-teman. oke simak terus ya.
Oke langsung saja untuk membahas lanjutan dari pseudo element selector before dan after, CSS3 menyediakan beragam fitur lain untuk generated content, misalnya kita bisa menyisipkan gambar, mengambil nilai atribut, atau bahkan membuat nomor urut yang dihasilkan dari CSS. Untuk mengambil nilai atribut, kita bisa menggunakan property content: attr(nama-atribut). Sebagai contoh, untuk mengambil alamat link dari sebuah tag <a>, saya bisa menggunakan property content: attr(href), seperti contoh berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
a::after{
content: attr(href);
}
</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>
Perhatikan bahwa setelah nama list, terdapat alamat link yang dihasilkan oleh property content. Agar tampilannya lebih rapi, saya bisa memformat tulisan ini agar lebih baik lagi:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
a::after{
content: " ("attr(href)") ";
color: silver;
}
</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, setelah penulisan link terdapat alamat tujuan. Fitur seperti ini sangat berguna untuk halaman web yang akan di print. Situs forum kaskus.co.id baru-baru ini juga menampilkan link dengan cara seperti ini. Tujuannya agar pembaca forum bisa mengetahui alamat link yang akan di-klik, atau dengan menggunakan istilah kaskuser, warna saya beri warna silver ya teman-teman, untuk menghindari ‘jebakan betmen’. Bagimana sudah bertambah lagi ya teman-teman ilmunya tentang lanjutan dari pseudo element selector before dan after, semoga bermanfaat dan sampai jumpa pada artikel selanjutnnya terimakasih.
The post Lanjutan dari Pseudo Element Selector Before dan After appeared first on Kursus Website Terbaik.