Insert a link to the id of any heading which has an id

_add_permalink_links_to_every_heading_with_an_id

Check it out

behavior.js

function linkHeadings () {
  document.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id]').forEach(heading => {
    const anchor = document.createElement('a')

    anchor.innerText = '#'
    anchor.classList.add('permalink')
    anchor.setAttribute('href', `#${heading.id}`)
    anchor.setAttribute('title', 'Permalink')

    heading.append(anchor)
  })
}

linkHeadings()

style.css

h2, h3, h4, h5, h6 {
  position: relative;
}

/* By default, show the permalink at the end of the heading's content */

h2 > a.permalink,
h3 > a.permalink,
h4 > a.permalink,
h5 > a.permalink,
h6 > a.permalink {
  text-decoration: none;
  padding-left: 10px;
}

@media (hover: hover) {
  /* For devices that can hover, show the permalink to the left of the heading on hover */
  h2 > a.permalink,
  h3 > a.permalink,
  h4 > a.permalink,
  h5 > a.permalink,
  h6 > a.permalink {
    display: none;
    position: absolute;
    bottom: 0;
    right: 100%;
    padding-right: 10px;
    padding-left: 0;
    text-decoration: none;
  }

  h2:hover > a.permalink,
  h3:hover > a.permalink,
  h4:hover > a.permalink,
  h5:hover > a.permalink,
  h6:hover > a.permalink {
    display: block;
  }
}