htmlcssanchoroffset

How to offset a anchor link to clear fixed header?

As the title describes. I am trying to offset the anchor link, so it appears 100px from the top of the viewport.

This is what I have tried so far.

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      visibility: hidden;
      }
 </style>

<a href="#01"> Go to link 01</a> 
  
<h2 id="01"> link 01</h2>

edit:: I think I miss read the online tutorial I was following. I have also tried this, but still can't get it to work.

<style>
   :target {
      display: block;
      position: relative;
      top: 100px; 
      margin: -100px 0;
      }
 </style>

<a href="#01"> Go to link 01</a> 

<h2 id="01"> link 01</h2>
Solution

  • This seems to work.

    :target:before {
    content: "";
    display: block;
    height: 100px;
    margin: -100px 0 0;
}