Code:
<style>
.skip-link {
background-color: #fff;
position: absolute;
padding: 0.2em;
display: block;
}
.skip-link:not(:focus):not(:active) {
clip-path: inset(50%);
height: 1px;
overflow: hidden;
white-space: nowrap;
width: 1px;
}
:focus-visible {
outline: 4px solid #123456;
outline-offset: 4px;
}
</style>
<header>
<a href="#content" class="skip-link">Skip to content</a>
<button>Header button 1</button>
<button>Header button 2</button>
<button>Header button 3</button>
<button>Header button 4</button>
</header>
<main id="content">
<button>Main button 1</button>
<button>Main button 2</button>
<button>Main button 3</button>
<button>Main button 4</button>
</main>
Live Demo on CodePen