Maybe restructuring the html is actually best here - `<h1><a id="foo" href="#foo">header</a></h1>` - that also helps my concern about putting block level elements inside inline elements without making the `<a>` display: block.

And then we can do the css like:

```scss
h1, h2, etc {
  a {
    color: $darkTextColor;

    &:hover {
      text-decoration: underline;
    }
  }
}
```