Cara Menggunakan :before dan :after

::before dan ::after adalah selektor CSS digunakan untuk menambahkan elemen sebelum dan setelah elemen utama.

cara menggunakan before dan after
Selektor CSS dapat digunakan menambahkan sesuatu di kanan atau kiri, tepatnya sebelum dan setelah sebuah elemen. Ini dinamakan ::before dan ::after. Bagaimana menggunakan selektor ini? Mudah, ikuti tutorial di sini.

Definisi dan Penggunaan :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.

Cara Menggunakan :before

Sintaks CSS
[ ::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>]

Lihat hasilnya di bawah.
Contoh 2. Bukan hanya teks yang bisa Anda tambahkan, melainkan juga sebuah ikon. Jika Anda ingin melakukan itu, maka sintaks CSS-nya adalah sebagai berikut

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

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.

Cara Menggunakan :after

Sintaksnya sama dengan ::before, namun merupakan kebalikan darinya, sehingga menjadi ::after.
Misal, saya akan menambahkan ikon jempol setelah atau di sebelah kanan kata "suka". Lihat contoh di bawah.

SUKA

Contoh 3. Menambahkan sebuah ikon di sebelah kanan Admin di kolom komentar blog. Sintaks CSS-nya adalah sebagai berikut.

[ .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 bawah ini.


Selamat mencoba!

COMMENTS

BLOGGER: 8
  1. dapat kode "\f0ed" darimana ya gan ?

    ReplyDelete
    Replies
    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

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

    ReplyDelete
  3. Boleh dicoba ni virlyalivia.blogspot.com

    ReplyDelete
  4. Bisa gak kalau font awesome ketika di hover itu berubah warna (misal merah) makasih

    ReplyDelete
  5. Sekarang jadi lebih mengerti, thank you, gan

    ReplyDelete

Name

Adsense,2,Blockquote,1,Blogger,17,Blogger Tool,1,Blogspot,1,Contact Form,3,CSS,23,CSS3,1,Domain,1,Font,2,Halaman,3,HTML,5,JavaScript,17,jQuery,6,Komentar,2,Page Loading,1,SEO,1,Share Button,1,Sidebar,1,Tag Kondisional,1,Tema,11,Trik,1,Website,1,WordPress,2,
ltr
item
Jelas in Blog: Cara Menggunakan :before dan :after
Cara Menggunakan :before dan :after
::before dan ::after adalah selektor CSS digunakan untuk menambahkan elemen sebelum dan setelah elemen utama.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggH_sYNapDjFXFAPuiXlnrqMKd-aPOJDLRa_mTbILmZ8RKUHN8AxHhYYmk-E8V-u_2wi8ALqZcDwWOlUyLcoHAC9R27oH5_DmdimMg4NEjjcaOVfAFy4XNCYNTuFJWurGCR_mrTusbPfM/s1600/cara+menggunakan+before+dan+after.jpg
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggH_sYNapDjFXFAPuiXlnrqMKd-aPOJDLRa_mTbILmZ8RKUHN8AxHhYYmk-E8V-u_2wi8ALqZcDwWOlUyLcoHAC9R27oH5_DmdimMg4NEjjcaOVfAFy4XNCYNTuFJWurGCR_mrTusbPfM/s72-c/cara+menggunakan+before+dan+after.jpg
Jelas in Blog
https://jelasinblog.blogspot.com/2014/05/cara-menggunakan-before-dan-after.html
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/
https://jelasinblog.blogspot.com/2014/05/cara-menggunakan-before-dan-after.html
true
2350744749749285503
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content