Cara Menggunakan :before dan :after

Apa arti :before dan :after?
:before dan :after dari bahasa Inggris, before artinya sebelum dan after artinya sesudah. :before digunakan untuk menambahkan elemen sebelum elemen utama, sedangkan :after digunakan untuk menambahkan elemen setelah elemen utama.

Atau saya bisa katakan, :before digunakan untuk menambahkan elemen di sebelah kiri elemen utama, sedangkan :after digunakan untuk menambahkan elemen di sebelah kanan elemen utama.

Menggunakan CSS :before


:before{
 deklarasi CSS;
}

Contoh 1. Saya buat sebuah elemen bernama "tambah-kata". Nanti, saya akan tambahkan kata derajat sebelum elemen "tambah-kata", semua elemen "tambah-kata".

CSS
.tambah-kata:before {
 content:"derajat ";
}

HTML
<div class='tambah-kata'>Celcius</div>
<div class='tambah-kata'>Apa lagi ya?</div>
<div class='tambah-kata'>Orang berilmu</div>


Hasil.


Contoh 2. Saya akan menambahkan "sesuatu" sebelum elemen "download".

.download:before {
 content:"\f0ed";
}

Hasil.

"download"


Lihat 'sesuatu' (gambar tanda panah ke bawah dalam awan) di sebelah kiri kata "download"?
Darimana saya mendapatkan kode "\f0ed"? Silahkan baca artikel Cara memasang font awsome di blogger.


Menggunakan CSS :after

Penulisannya sama dengan :before, Anda hanya perlu menggantinya menjadi :after.

Contoh 3.

Menambahkan icon setelah nama Admin
.comment_admin .comment_name:after {
  position:absolute;
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  text-decoration:inherit;
  -webkit-font-smoothing:antialiased;
}

.comment_admin .comment_name:after {
  content:"\f007";
  top:0;
  padding-left:7px;
  font-size:16px;
  color:$(first.background.color);
}



Hasilnya, lihat gambar di awal, atau periksa komentar oleh Admin pada blog ini.
Teknik yang sama digunakan untuk menambahkan ikon yang berbeda pada judul widget pada blog ini.

Selamat mencoba :)

Komentar

  1. dapat kode "\f0ed" darimana ya gan ?

    BalasHapus
    Balasan
    1. Oooh itu. Masukkan link font-awesome terlebih dahulu. Caranya silahkan agan baca di http://jelasinblog.blogspot.com/2014/04/cara-memasang-font-awesome-di-blogger.html

      Hapus
  2. Kang punya saya kok malah jadi ngacak??
    http://coffee21.blogspot.com

    BalasHapus
  3. Boleh dicoba ni virlyalivia.blogspot.com

    BalasHapus

Posting Komentar

Pos populer dari blog ini

Perbedaan JavaScript dan jQuery Beserta Contoh

Tutorial Sevida v2.4.2 - Responsive Magazine Blogger Template