diff --git a/assets/css/099_content.css b/assets/css/099_content.css
index dff6bd9..ac61242 100644
--- a/assets/css/099_content.css
+++ b/assets/css/099_content.css
@@ -41,4 +41,28 @@
   .content-date {
     margin-block-end: var(--space-paragraph);
   }
+
+  .heading {
+    display: block flex;
+    gap: var(--space-s);
+    grid-column: main-start / main-end;
+  }
+
+  .heading__anchor {
+    align-self: center;
+    color: var(--gray5);
+    font-size: var(--text-m);
+    justify-content: center;
+    letter-spacing: -0.2em;
+
+    a {
+      transition: 0.3s color;
+    }
+
+    a:hover {
+      color: var(--text-color);
+      text-decoration: none;
+      transition: 0.3s color;
+    }
+  }
 }
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 0c2e194..6100c83 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,8 +1,11 @@
-<h{{ .Level }} id="{{ .Anchor }}" class="heading">
-  {{ .Text | safeHTML }}
-  {{- $pageWantsAnchors := .Page.Params.renderHeadingAnchors | default true -}}
-  {{- $anchorEnabledForThisHeading := .Attributes.anchor | default true -}}
-  {{- if and $pageWantsAnchors $anchorEnabledForThisHeading -}}
-    <a class="heading__anchor" href="#{{ .Anchor }}">#</a>
+{{- $pageWantsAnchors := .Page.Params.renderHeadingAnchors | default true -}}
+{{- $anchorEnabledForThisHeading := .Attributes.anchor | default true -}}
+{{- $hasAnchor := and $pageWantsAnchors $anchorEnabledForThisHeading -}}
+<h{{ .Level }} id="{{ .Anchor }}" class="heading{{ if $hasAnchor }}  with-anchor{{ end }}">
+  {{- if $hasAnchor -}}
+    <span class="heading__anchor">
+      <a href="#{{ .Anchor }}">{{ range seq .Level }}#{{ end }}</a>
+    </span>
   {{- end -}}
+  {{ .Text | safeHTML }}
 </h{{ .Level }}>