Skip to content

Instantly share code, notes, and snippets.

@daniellmb daniellmb/anchor-style.css
Last active Feb 19, 2016

Embed
What would you like to do?
Dynamically inject heading links
/* unobtrusively style deep-linking heading anchors */
.anchor {
color: gray;
display: inline-block;
margin-left: -1rem;
opacity: 0;
padding-right: 0.1rem;
-webkit-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
-moz-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
-ms-transition: opacity cubic-bezier(0,1,.35,.96) 1s;
}
h2:hover .anchor,
h3:hover .anchor,
h4:hover .anchor,
h5:hover .anchor,
h6:hover .anchor {
opacity: 1;
text-decoration: none;
}
// auto-link page headings 0.1 KB minified
[].forEach.call(document.querySelectorAll('h2,h3,h4,h5,h6'), function(tag) {
tag.id && (tag.innerHTML = '<a href="#' + tag.id + '"class="anchor">¶</a>' + tag.innerHTML)
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.