Pseudo-elemen dalam kode CSS ~ Versi Aplikasi

Pseudo-elemen dalam kode CSS

Sintaks :

pemilih:pseudo-elemen{
properti:nilai;
}

Atau dengan CSS class :

pemilih.class:pseudo-elemen{
properti:nilai;
}

:first-line

Digunakan untuk menambah gaya khusus pada baris pertama dari teks.

Gunakan Notepad :

<html>
<head>
<style type="text/css">
p:first-line{
color:maroon;
font-variant:small-caps;
}
</style>
</head>

<body>
<p>:first-line digunakan untuk menambah gaya khusus pada baris pertama dari teks. Hanya sekedar contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh contoh.</p>
</body>
</html>

Save As .html atau htm .

Anda bisa gunakan properti berikut :

font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:first-letter

Digunakan untuk menambah gaya khusus pada huruf pertama dari teks. Mudah-mudahan ini menjawab sahabat saya yang bertanya "bro, gimana cara untuk membuat setiap huruf pertama paragraf menjadi besar ?".

Contoh :

p:first-letter{
font-size:20px;
color:yellow;
}

Jadinya akan seperti ini...

Anda bisa gunakan properti berikut :

font
color
background
margin
padding
border
text-decoration
float
vertical-align (bisa digunakan jika float:none;)
text-transform
line-height
clear

Pseudo-elemen dan CSS Class

Contoh CSS :

p.contoh:first-letter{
font-size:20px;
color:yellow;
}

Contoh HTML :

<p class="contoh">Blog Nano Yulianto</p>

Kombinasi pseudo-elemen

Beberapa pseudo-elemen dapat dikombinasikan

Contoh :

p:first-letter{
font-size:20px;
color:yellow;
}

p:first-line{
color:#ff0000;
font-variant:small-caps;
}

Kombinasi pseudo-elemen hanya sekedar contoh dalam tutorial belajar dasar-dasar kode CSS atau bahasa bataknya CSS Basics.

:before

Digunakan untuk memasukkan beberapa konten sebelum elemen.

Contoh :

p:before{
content:url(http://nanoyulianto.blogspot.com/favicon.ico);
padding-right:10px;
}

Jadinya :before pseudo-elemen

:after

Digunakan untuk memasukan beberapa konten sesudah elemen.

Contoh :

p:after{
content:url(http://nanoyulianto.blogspot.com/favicon.ico);
padding-left:10px;
}

Jadinya :after pseudo-elemen