Tutorial Belajar CSS Part 36 – Pseudo Element

bySetyo Wibowo ID - 0


masih membahas mengenai CSS, dalam tutorial ini kita akan membahas mengenai CSS Pseudo Element.





Pseudo Element adalah salah satu jenis selector css yang digunakan untuk mengakses bagian elemen tertentu pada HTML, Semisal seperti garis pertama pada paragraf, Lalu Karakter pertama dari sebuah paragraf, dan lain sebagainya.





Untuk syntax pseudo element kurang lebih seperti berikut ini :





selector::pseudo-element {
    property:value;
}




Kita akan mempelajari beberapa jenis Pseudo Element yang bisa anda gunakan dalam CSS





::first-line Pseudo Element





Pseudo Element jenis ini digunakan untuk mengganti tampilan baris pertama pada sebuah elemen, dalam contoh ini kita coba untuk merubah tampilan baris pertama pada sebuah paragraf, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p::first-line{
			color:red;
			font-size:30px;
		}
	</style>
</head>
<body>
<p>Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf, Ini adalah paragraf</p>
</body>
</html>




Semisal kita simpan dengan nama first-line.html, lalu kita buka di browser maka hasilnya adalah seperti berikut ini :









Keterangan :





  • Pada baris pertama di paragraf text berwarna merah, dan ukurannya adalah 30 pixel, hal tersebut karena kita menggunakan p::first-line




::first-letter





Pseudo Element jenis ini digunakan untuk merubah tampilkan huruf pertama pada sebuah element, dalam contoh ini kita akan gunakan pada elemen paragraf, silahkan perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p::first-letter{
			color:red;
			font-size:70px;
		}
	</style>
</head>
<body>
<p>Ini adalah paragraf</p>
</body>
</html>




Semisal kita simpan dengan nama first-letter.html, lalu saya buka di browser, maka hasilnya adalah sebagai berikut :









Keterangan :





  • Huruf pertama pada paragraf tersebut ditampilkan dengan warna merah dan ukurannya 70 pixel, karena kita menggunakan ::first-letter




::before dan ::after





Pseudo Element Jenis ini digunakan untuk memberikan object pada bagian sebelum atau sesudah dari sebuah element, untuk contohnya perhatikan skrip dibawah ini :





<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		p.satu::before{
			content: url(smile.gif);
		}
		p.dua::after{
			content: url(smile.gif);
		}
	</style>
</head>
<body>
<p class="satu">Ini adalah paragraf</p>
<p class="dua">Ini adalah paragraf</p>
</body>
</html>




semisal kita simpan dengan nama before-after.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :









Keterangan :





  • Pada Paragraf pertama terdapat gambar dengan nama smile.gif karena kita memberikan selector p.satu::before
  • Pada Paragraf kedua terdapat gambar dengan nama smile.gif karena kita memberikan selector p.dua::after




Jadi dengan Adanya Pseudo Element ini, teman – teman dapat memanipulasi bagian tertentu dari element pada HTML, jika ada yang ingin didiskusikan silahkan dikolom komentar, baik sekian dulu sampai jumpa di tutorial selanjutanya…


Tags:

Post a Comment (0)

Lebih baru Lebih lama