Membuat Teks Link Dengan Icon Open Tab

Untuk dokumentasi CSS style kali ini saya buat adalah membuat teks link kita mempunyai icon misalkan icon pop up seperti ini , Pasti sudah pernah melihatkan Link dengan icon seperti itu disampingnya, yang berguna sebagai penunjuk link yang bisa dibuka atau harus dibuka.

Hasil akhirnya lebih jelasnya seperti ini.

Ini adalah link dengan icon open tab 

Seperti itu, pasti pernah melihatnya kan, jika da yang belum tahu caranya agar terpasang otomatis di tiap teks link post artikel blog kamu, berikut ini caranya, cuma sedikit menambahkan css :

.post-body a{
padding-right:18px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29rJTb7GivqihUfEm7mQXgEzNhh1YYmBrHN-TZB5iMGUXsdndJ0-w-74xEP6Nkn1g1cg8Tine8SdIcefGdznMWSFKUwUaFBwx6VWDOc3ZdauVkrXey9VirAL6Bv9p5rlBBLid73dQOogM/s1600/link.png) no-repeat center right;
}
.separator a{ background:none;}

Jika div class post-body a sudah ada cukup tambahkan saja isinya :

padding-right:18px;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg29rJTb7GivqihUfEm7mQXgEzNhh1YYmBrHN-TZB5iMGUXsdndJ0-w-74xEP6Nkn1g1cg8Tine8SdIcefGdznMWSFKUwUaFBwx6VWDOc3ZdauVkrXey9VirAL6Bv9p5rlBBLid73dQOogM/s1600/link.png) no-repeat center right;

Cara menambahkan icon nya ada banyak cara dengan selektor css, bisa kamu baca lebih lengkap:


Hunlock.com