Demo4

Yeay,udah lama gak posting tentang trick trick blogger lagi,soal nya belum ada bahan buat posting XD

okay kali ini gw akan membahas seputar css :before dan :after

pernah kann kalian gak sengaja melihat source blog orang (sengaja mungkin XD)

melihat suatu css :before dan :after,atau mungkin hanya :before saja? nahh kali ini gw akan membahas itu,karena gw juga baru bisa soal css before dan after,jadi gak papa kann,kalau gw berbagi ilmu gw dikit hahahaha

okay,apa itu css :before dan :after?

simple aja sihh sebenar nya,:before di gunakan untuk menambahkan elemen sebelum elemen utama,sedangkan :after,digunakan untuk menambahkan elemen setelah elemen utama

inti nya menurut gw seperti suami istri dan yang selingkuh

si css utama (suami nya),sedangkan si :before (istri nya) dan si :after (selingkuhan nya)

dan kegunaan css ini juga bagus,jika kalian ingin menambah kan objek css misal nya ingin menambahkan css kepala,dan kalian ingin menambahkan css hidung nya (gak mungkin kan? kepala nya doank) nahh kamu cukup menambahkan tag css :before jadi gak perlu nambahin css dari hidung dan bikin css dari awal lagi,cukup nambahin,contoh css:

#kepala{
left: -40px;
top: 37px;
width: 80px;
height:80px;
background: #191919;
border-radius:100%;
}
#kepala:before {
content: "";left: -40px;
top: 37px;
width: 40px;
height:80px;
background: #191919;}

nihh gw kasih rumus nya

tapi terserah sihh mau letak css before nya dimana aja,itu cuma rumus awalan nya aja

ada lagi nihh contoh di template zynation ini menggunakan css before dan after

pre code {
  display: block; padding: 0.5em;
  background: #3F3F3F;
  color: #DCDCDC;
}
pre .keyword,
pre .tag,
pre .css .class,
pre .css .id,
pre .lisp .title,
pre .nginx .title,
pre .request,
pre .status,
pre .clojure .attribute {
  color: #E3CEAB;
}

Share :

Tweet

Related Post