Content Heading helpers

Heading anchors

Links with href="#..." inside headings are automatically displayed as anchors:

Heading with anchor #

How it works:

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

  a[aria-hidden="true"] {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    padding-right: 0.2ch;
    color: silver;
    text-decoration: none;
    visibility: hidden;
  }
  @media /* to avoid double-tap on touch devices */ (hover: hover) {
    &:hover {
      a[aria-hidden="true"] {
        visibility: visible;
      }
    }
  }
}

PRO example of automatic anchors for 11ty+markdown-it-anchor: /anyblades/eleventy-blades/blob/main/src/eleventy.config.js