Как автоматически создавать постоянные ссылки на hover для заголовков с идентификаторами?

Question

Когда вы просматриваете сайт наподобие http://github.com и http://readthedocs.org, документы, размещенные там, имеют приятное свойство, что заголовки абзацев показывают небольшой значок постоянной ссылки на зависание. К сожалению, хотя многие другие сайты do имеют id s в заголовках, постоянные ссылки на указанные #id иногда не предоставляются или, по крайней мере, скрыты в другом месте. В качестве примера: http://pandoc.org/MANUAL.html#extension-yaml_metadata_block. Таким образом, я хотел бы получить автоматическое получение github/rtd-ish on-hover permalinks на веб-сайтах, которые по умолчанию не предоставляют их.

Может ли это быть достигнуто только через stylish или это связано с userscript? Или еще лучше, кто-то уже его реализовал?

Простая попытка была бы, например,

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

, но это буквально визуализируется как <a href="#id">¶</a> вместо реальной линии связи, т.е. content не может содержать HTML-теги. Так что-то более сложное представляется необходимым, особенно учитывая не всех заголовков имеют id и некоторый сайт <a name="id"> вместо ...

Answer 1

Это потребуется userscript; Стильный - это чисто для CSS, и, как вы сказали, это невозможно сделать с помощью чистого CSS, потому что нам нужно добавить дополнительный HTML.

С другой стороны, с помощью пользовательских скриптов пользователи могут добавлять пользовательские Javascript на страницу, поэтому вам нужно будет просмотреть все элементы h4 на странице и добавить к ним <a href="#" + id>¶</a>. Нечто подобное (если вы //@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: '¶' 
     }); 
    } 
}); 

Кроме того, в HTML5, атрибут aname больше не существует, и вы должен просто использовать id и ссылки на них с #id.