# Adding anchor next to headers

**URL:** https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726
**Category:** support
**Created:** [September 15, 2015, 7:37pm UTC](https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726 "2015-09-15T19:37:05Z")
**Posts on this page:** 1
**Showing post:** 14

<div class="post-metadata">

### Author: ![TotallyInformation](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/totallyinformation/32/5668_2.png) [@TotallyInformation](https://discourse.gohugo.io/u/TotallyInformation)
#### Post date: [May 5, 2018, 1:24pm UTC](https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726/14 "2018-05-05T13:24:02Z")

</div>

Here’s what I ended up with in my `single.html` layout:

```auto
    {{- with .Content -}}
    <div>
      {{ . | replaceRE "(<h[1-9] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1}<a href="#${2}" class="hanchor" ariaLabel="Anchor"> 🔗&#xFE0E;</a> ${3}` | safeHTML }}
    </div>
    {{- end -}}

```

The CSS needed (I only show anchors on headings 1-4) is:

```auto
.hanchor { font-size: 100%; visibility: hidden; color:silver;}
h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}

```

The anchor shows in silver when you move the mouse over the heading and turns black when you hover over the anchor itself.

Also note the `ariaLabel` which you should really include for accessibility.

---

_[View the full topic](https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726)._