Nav with skip links

Sample:

Code:

<style>
  html {
    --text-color: hsl(0 0% 0%);
    --text-color-light: hsl(0deg 0% 100%);
    --highlight-color: hsl(209 56% 45%);
  }

  /* Basic styling for the skip link. */
   .skip-link:is(:link, :visited) {
    background-color: var(--highlight-color);
    color: var(--text-color-light);
    padding: 0.5rem;
    position: absolute;
    text-decoration: none;
  }

  /* Hide the link visually if it's not focused */
   .skip-link:not(:focus-visible):not(:active) {
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    width: 1px;
    white-space: nowrap;
  }

   ul {
    display: flex;
    font-size: 1.4rem;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
   header a {
    padding: 0.2rem;
  }

   header a:is(:link, :visited) {
    border-block-end: 3px solid var(--border-color, transparent);
    color: var(--text-color);
    text-decoration: none;
  }

   header a:focus-visible {
    outline: 4px solid currentColor;
    outline-offset: 2px;
  }

   header [aria-current="page"] {
    --border-color: var(--highlight-color);
    --text-color: var(--highlight-color);
  }
</style>

<a class="skip-link" href="#main-nav">Jump to navigation</a>
<header>

  <!-- Some random exemplary interactive elements that come before the main navigation. -->
  <a href="/">My website</a>
  <a href="/">Some link</a>
  <a href="/">Another link</a>
  <button>A button</button>
  <button>Another button</button>

  <nav id="main-nav" aria-label="Main">
    <ul>
      <li>
        <a href="/home">Home</a>
      </li>
      <li>
        <a href="/products" aria-current="page">Products</a>
      </li>
      <li>
        <a href="/team">Team</a>
      </li>
      <li>
        <a href="/contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>

<main>
  <button>Button 1</button>
  <button>Button 2</button>
  <button>Button 3</button>
  <button>Button 4</button>
  <button>Button 5</button>
</main>