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
  4. Bisa gak kalau font awesome ketika di hover itu berubah warna (misal merah) makasih

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Perbedaan JavaScript dan jQuery Beserta Contoh

Manisnya Font Roboto - Cara Pasang dan Penggunaan