How to automatically create on-hover permalinks to headers with ids?

Question

When you browse site like http://github.com and http://readthedocs.org, the documents hosted there have the nice property that headers of paragraphs reveal a small permalink icon on hovering. Unfortunately, though many other sites do have ids in headers, permalinks to said #id are sometimes not provided or at least hidden elsewhere. As an example: http://pandoc.org/MANUAL.html#extension-yaml_metadata_block. So what I would like to achieve is to automatically obtain github/rtd-ish on-hover permalinks on websites that by default don't provide them.

Can this be achieved via stylish alone or does this involve a userscript? Or better yet, has someone already implemented it?

---

A simple attempt would have been e.g.

h4:after { content: "<a href=\"#" attr(id) "\">¶</a>" ; }

but that is literally rendered as <a href="#id">¶</a> instead of an actual link, i.e. content cannot contain html tags. So something more complicated seems necessary, especially considering not all headers have an id and some site is <a name="id"> instead...

Answer 1

This would need a userscript; Stylish is purely for CSS and, as you said, this can't be done with pure CSS because we need to add some extra HTML.

Userscripts, on the other hand, allow you to add custom JavaScript to the page, so you'd need to loop through all the h4 elements in the page and append <a href="#" + id>¶</a> to them. Something like (if you //@require jQuery):

$('h4').each(function() {
    var id = $(this).attr('id');
    if (id) { //make sure the element has an id
        $(this).append($('<a/>', {
            href: '#' + $(this).attr('id'),
            text: '¶'
        }));
    }
});

Also, in HTML5, the name attribute doesn't exist for a elements anymore, and you're supposed to just use id and link to them with #id.