Show markdown header link icons on hover

[infogulch]

If you use the default config of rehypeSlug + rehypeAutolinkHeadings with behavior: "append" like this, then you can style all of the headers to have a nice clickable link animation that shows on hover with this:

:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link {
  display: inline;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z"></path></svg>');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 0.8em;
  height: 0.8em;
  width: 0.8em;
  padding-left: 1em;
  padding-right: 0.5em;
  cursor: pointer;
}

/* optional: nice icon hover transitions */
:where(h1, h2, h3, h4, h5, h6):hover span.icon.icon-link:hover {
  background-size: 0.9em;
  height: 0.9em;
  width: 0.9em;
  filter: invert(0.1);
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

Demo: https://codepen.io/infogulch/pen/BaYBZxa?editors=1100

I didn't see this demoed anywhere so I thought I'd share.