CSS Tutorial : Pengertian Dari Pseudo-Element Dalam CSS. Apa Itu Pseudo-Elements

0
Category: , ,

Pseudo-Elements biasanya digunakan untuk tulisan atau semacamnya. Pseudo-Elements mempunyai 4 pilihan dalam CSS. Penempatan Pseudo-Elements sama dengan Pseudo-Class...Okey Saya males Basa-basi...Check it out...




First-Line

Digunakan untuk Styling pada baris pertama dari sebuah text. First-Line bukan sampai "Titik[ . ]" tapi sampai text 2 baris atau lebih. Baris Pertamalah yang hanya akan di Styling...

Contoh Program :
h3.y:first-line {
color:#ff0000;
font-size:24px;
}

HTML :
<h4 class="y">Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ </h4>

Hasil :

Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][




First-Letter

First-Letter adalah element yang digunakan untuk Styling Huruf pertama pada sebuah teks...

Contoh Program :
h3.w:first-letter {
color:#ff0000;
font-size:24px;
}

HTML :
<h4 class="w">Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ </h4>

Hasil :

Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][




Elemen Before

Before digunakan untuk menempatkan suatu konten Di Depan Sebuah CSS. Jika masih bingung lihat Contoh Pemrogramannya...

Contoh Program :
#a:before {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQXpw7lr5UqjIryvkrvdC9nJ3HYquEBH2ElYkt1peSXxJ6Wz97fQL6_kDH9AKjU99kCN9S34O9bLlErekIlSAjAdcCkl92rIFOA-8O5GRsdc5_I81souuD7dgHBjn2ExicyiQCAlZ8bs/s1600/1408154388_b34a66bdcf_s.jpg);
}

HTML :
<h4 id="a">Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ </h4>

Hasil :

Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][




Elemen After

After digunakan untuk menempatkan suatu konten Di Belakang Sebuah CSS. Jika masih bingung lihat Contoh Pemrogramannya...

Contoh Program :
#r:after {
content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyQXpw7lr5UqjIryvkrvdC9nJ3HYquEBH2ElYkt1peSXxJ6Wz97fQL6_kDH9AKjU99kCN9S34O9bLlErekIlSAjAdcCkl92rIFOA-8O5GRsdc5_I81souuD7dgHBjn2ExicyiQCAlZ8bs/s1600/1408154388_b34a66bdcf_s.jpg);
}

HTML :
<h4 id="r">Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ </h4>

Hasil :

Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][ Kegampangan.blogspot.com ][



Sangat Mudah Kan...???