Link masking example

mask.hbs

<article class="is-relative">
  <a class="is-mask" aria-label="permalink" href="#example"></a>
  <h1 class="is-mask-label">Example title</h1>
  <p>Clicking anywhere here should navigate to #example</p>
  <figure class="is-behind">
    Add <code>.is-behind</code> as needed to drop elements behind the mask
  </figure>
  <fieldset>
    <button>example button should not navigate</button>
    <button disabled>disabled button should not navigate</button>
  </fieldset>
</article>

mask.scss

.is-relative {
  position: relative;
}

.is-mask::after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: ''; }

.is-mask-label {
}
  
.is-behind,
.is-behind * {
  z-index: -1; }