Css Link Hover disertai icon

Link yang diklik atau sekedar meletakkan mouse diatasnya akan mengalami perubahan baik efek atau warna pada bagian tersebut itulah yang saya artikan sebagai Hover.
Namun dalam arti yang singkat Hover dapat juga diartikan dengan pengalihan.

Pada kesempatan kali ini kita akan membuat link Hover yang disertai oleh icon kecil sebagai pemanis, semanis yang membaca tulisan ini :D.
Icon kecil sering kita jumpai pada CSS yang yaitu pada kode ol li atau ul li yang memang pada CSS tersebut cukup merubah angka menjadi icon.

Disini kita menerapkan kode link biasa, lihat hasilnya berikut:

CSS hover with icon right

<style>
.icon-link a {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}

a.icon-link:hover {
position: relative;
background-color: #3f51b5;
color: white;
}
a.icon-link:hover:after {
font-family: FontAwesome;
content:"❯";
position: relative;
float: right;
color: white;
}

</style>

CSS hover with icon left

​

<style>
.icon-link a {
width: 100%;
display: block;
padding: 8px 16px;
text-align: left;
border: none;
white-space: normal;
float: none;
outline: 0;
}

a.icon-link:hover {
position: relative;
background-color: #3f51b5;
color: white;
}
a.icon-link:hover:before {
font-family: FontAwesome;
content:"❯";
position: relative;
float: left;
margin-righ: 8px;
color: white;
}

</style>

Pilih salah satu dari CSS diatas dan pasang pada selektor CSS yang sudah ada.
Gunakan html code dibawah ini s
Di postingan atau sidebar blog.

HTML

<h4>MAIN MENU</h4>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>
<a class="icon-link" href="#"> link hover dengan icon</a>

Demikian semoga bermanfaat.