Css : Pseudo-elements

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">Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ </h4>

Hasil :

Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][

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">Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ </h4>

Hasil :

Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][

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/AVvXsEjyRADTx94ss2p7ZBEdM7sAZwi0yyVm1XnPXSywgcHCopeDm4bqajeiqwRHayI2fMZMcniLMqeBJNBka7mPQ-GrF8bcqPFMmNLVOY2AbnocbpMR1R1pOAkMqhfysSeqOjqnxVZ7qBP5r3A/s1600/1408154388_b34a66bdcf_s.jpg);
}

HTML :
<h4 id="a">Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ </h4>

Hasil :

Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][

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/AVvXsEjyRADTx94ss2p7ZBEdM7sAZwi0yyVm1XnPXSywgcHCopeDm4bqajeiqwRHayI2fMZMcniLMqeBJNBka7mPQ-GrF8bcqPFMmNLVOY2AbnocbpMR1R1pOAkMqhfysSeqOjqnxVZ7qBP5r3A/s1600/1408154388_b34a66bdcf_s.jpg);
}

HTML :
<h4 id="r">Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ </h4>

Hasil :

Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][ Web-Rpl.Co.Cc ][

Sekian Penjelasan Dari Saya...Semoga Bermanfaat...

Posted in: Css Tutorial