I envied this little eye candy on some other blogs and it was easy to throw together.
If you’re on WordPress, a plugin like Simple Custom CSS and JS comes in handy for stuff like this.
CSS
a.headerLink:hover {
color: inherit;
opacity: 1;
}
a.headerLink {
position: relative;
transition: opacity 0.5s ease-in-out;
cursor: pointer;
opacity: .2;
}
a.headerLink i.fa {
position: absolute;
left: -1.5em;
}
a.headerLink:focus {
color: inherit !important;
}
JS
$(':header:not("[class]")').each(function(idx, el){
var l = $(el);
var name = l.text().replace(/\W+/g, "");
l.prepend('<a name="'+name+'" class="headerLink" href=#'+name+'><i class="fa fa-chain"></i></a>');
});