Heading anchor links styling

[petesfrench]

Visual

Normal: Hover:

Context

All docs

SCSS example

.p-anchor-link {
  color: $color-dark;

  &:visited {
    color: $color-dark;
  }

  &:after {
    @extend .p-icon--anchor;
    content: "¶";
    display: inline-block;
    padding: 1rem;
    top: 0.6rem;
    visibility: hidden;
    margin-left: 0.75rem;
  }

  &:hover {
    &::after {
      visibility: visible;
    }
  }
}

<h2><a class="p-anchor-link" href="#in-this-documentation-1" name="in-this-documentation-1">In this documentation</a></h2>