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"; }CSS ini akan menhasilkan 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!
