pseudo element adalah salah satu teknik penulisan dalam css, selain fungsi utamanya merubah maupun mendesign website. css ini juga dilengkapi berbagai macam teknik penulisan, kali ini kita akan share tentang pseudo element css. pseudo element ini penulisanya mirip dengan pseudo classes, hanya saja fungsinya yang berbeda
aturan pelulisan pseudo element
seperti ini
slector_atau_taghtml:pseudo_element{property:value;}
keterangan
- diawali dengan selector atau tag html
- kemudian : (titik dua)
- nilai pseudo element
- lalu { property:value}
nilai pseudo element
antar lain
- first-letter:style untuk huruf awal
- first-line:style untuk baris pertama
contoh pseudo element
perhatikan markup/style dibawah
<html>
<head>
<title>css pseudo element</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
p:first-letter{color:blue;/*style untuk huruf awal*/}
p:first-line{color:red;/*style untuk baris pertama*/}
#misal:first-letter{background-color:red;
font-size:20px;
font-weight:bold;/*style untuk huruf awal*/}
#misal:first-line{
background-color:lime;
font-size:25px;/*style untuk baris pertama*/}
</style>
</head>
<body>
<div id="misal">
ini adalah contoh pseudo css<br/>
ini adalah contoh pseudo css
</div>
<p>ini adalah contoh pseudo<br/> css</p>
<div style="clear:both;/**/"></div>
<p>salam <a href="http://www.indaam.com" title="indam site" target="_blank">indaam site</a></p>
</body>
</html>
untuk melihat hasilnya
- copy markup style diatas
- paste ke notepad
- save as (pilih all types) dengan nama contohpseudo_element.htm
- jalankan(double click), atau
- open with (firefox, ie, opera, safari, chrome)
- silakan edit valuenya
- letak valuenya antara : (titik dua) dan ;(titik koma)
- selamat belajar
semoga bermanfaat
References
http://www.w3.org/Style/CSS
Sorry, formulir komentar sedang dalam perbaikan