pseudo before adalah salah satu teknik dalam css, fungsinya ialah memberi style
sebelum(before) content
aturan pelulisan pseudo before
slector_atau_taghtml:before{content:value;property:value;}
keterangan
- diawali dengan selector atau tag html
- kemudian : before
- lalu { property:value}
contoh css pseudo before
perhatikan markup code dibawah
<html>
<head>
<title>css pseudo before</title>
<meta content="indam url:http://www.indaam.com" name="author"/>
<style type="text/css">
p{font-size:30px;}
p:before{content:url(http://www.indaam.com/wp-content/uploads/cursor/9cursor.gif);/*ini adalahtampilan/style sebelum content*/
}
.misal:before{
content: "\00BB \0020";/*ini adalah tampilan/style sebelum content*/
color:red;/*warna merah*/
}
li{list-style-type:none;}
</style>
</head>
<body>
<p>ini adalah contoh pseudo before css</p>
<ul>
<li class="misal" >daftar 1</li>
<li class="misal" >daftar 2</li>
<li class="misal" >daftar 3</li>
<li class="misal" >daftar 4</li>
</ul>
<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_before.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
References
http://www.w3.org/Style/CSS
Sorry, formulir komentar sedang dalam perbaikan