ID가있는 헤더에 온 - 공중 (on-hover) 퍼머 링크를 자동으로 만드는 방법은 무엇입니까?

Question

http://github.com 및 http://readthedocs.org과 같은 사이트를 탐색 할 때 호스팅 된 문서에는 단락의 헤더가 호버링시 작은 퍼머 링크 아이콘을 나타내는 멋진 속성이 있습니다. 불행히도 많은 다른 사이트 은의 헤더에 id 초를 가지고 있지만, #id에 대한 퍼멀 링크는 때때로 제공되지 않거나 적어도 다른 곳에 숨겨져 있습니다. 예 : http://pandoc.org/MANUAL.html#extension-yaml_metadata_block. 그래서 내가 성취하고자하는 것은 기본적으로 제공하지 않는 웹 사이트에서 github/rtd-ish on-hover 퍼멀로크를 자동으로 얻는 것입니다.

stylish을 단독으로 수행 할 수 있습니까? 아니면 userscript을 포함합니까? 또는 더 나은 아직, 누군가 그것을 이미 구현 했습니까?

---

간단한 시도가있었습니다. content HTML 태그를 포함 할 수 없습니다 즉

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

그러나 그것은 말 그대로 대신 실제 링크의 <a href="#id">¶</a>로 렌더링 입니다. 그래서 더 복잡한 일이이 userscript을 필요

Answer 1

... 특히하지 모든 헤더가 id이 일부 사이트 대신 <a name="id">이다 고려, 필요한 것 같다; 스타일리시 한 CSS는 순수 CSS를 사용하기 때문에 추가 CSS를 추가해야하기 때문에 순수한 CSS로는이 작업을 수행 할 수 없습니다.

사용자 스크립트는 사용자 정의 자바 스크립트를 페이지에 추가 할 수 있으므로 페이지의 모든 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 및 링크를 사용하는을 예정입니다.