CSS untuk Pseudo Element

Membuat Element Pseudo (before/after)

Berikut ini adalah sedikit tip tentang CSS Pseudo Element (before, after). Dan ini adalah contoh penggunaan CSS Pseudo Element untuk membuat sebuah style (bentuk) yang bisa sobat lihat pada style post pada artikel ini.

Apabila sobat ingin belajar dan mencobanya dibawah ini adalah kode CSS da HTML-nya.

Kode CSS

<style>
.post-kotak{position:relative;width:70%;margin:0 auto;padding:10px;background:#888;border:1px solid #444;font-size:18px;color:#ddd;
}
.judul{position:relative;width:auto;margin:0  -30px 10px -30px;font-size:20px;color:#000;border:1px solid  #444;background:#ddd;padding:5px;text-align:center;
}
.judul:before{content:"";position:absolute;top:34px;left:0px;width:0px;height:0px;border-width:10px;   border-style:solid;  border-color:#444 #444 transparent  transparent;z-index:-4;
}
.judul:after{content:"";position:absolute;top:34px;right:0px;width:0px;height:0px;border-width:10px;   border-style:solid;  border-color: #444 transparent transparent  #444;z-index:-4;
}
</style>

Kode HTML

 <div class='post-kotak'><div class='judul'>JUDUL KONTENT</div>
isi atau tulisan artikelnya disini
</div>

Notice :

Sedikit penjelasan tentang CSS Pseudo Element, yang saya ketahui saat ini,

• Main (widget utama) pada contoh diatas adalah (.post-kotak) pastikan bahwa posisinya adalah relative.
• Pastikan juga widget yang akan diberikan muatan CSS Pseudo element sebaiknya dengan posisi relative, sebagai contoh diatas adalah widget (.judul).
• CSS Pseudo element, Untuk posisinya sebenarnya tergantung di mana CSS before/after tersebut diletakan, untuk contoh diatas adalah dengan menggunakan posisi absolute.

Nah itulah sedikit penjelasan tentang CSS Pseudo element, dan untuk lebih jelasnya silahkan bereksperimen sendiri...!!!

Artikel Terkait