Sublinhado da guia de posicionamento de âncora

Em um menu de guias, é preciso fornecer dicas visuais aos usuários sobre em qual página eles estão. Uma opção é sublinhar a guia. Com o posicionamento de âncora, é possível criar uma animação suave entre as posições do sublinhado. Isso não funciona quando a mudança da guia ativa carrega uma nova página da Web.

Você também pode usar esse efeito para adicionar um ponto animado que indica a guia ativa em uma barra de guias vertical.

Crie o sublinhado usando um pseudoelemento ::before no <ul> que contém os elementos <li>. O uso de um pseudoelemento é a abordagem preferida, porque mantém o DOM limpo e evita a adição de elementos extras para efeitos puramente decorativos.

ul::before {
  /* Use a pseudo-element on the container to represent the animated indicator */
  content: '';
}

Adicione a propriedade anchor-name, que tem um valor que começa com --, para transformar o item de lista ativo em uma âncora.

li.active {
  /* Make a unique anchor-name for the active element. */
  anchor-name: --active;
}

Vincule o sublinhado à âncora do item ativo com um position-anchor que corresponda ao anchor-name na âncora e defina como position: absolute.

ul::before {
  /* Tether the underline to the active element. */
  position: absolute;
  position-anchor: --active;
}

Posicione o sublinhado em relação à âncora usando as propriedades de inserção e as funções anchor().

ul::before {
  /* DO NOT use position-area, which can not be transitioned. */
  /* Use calc() to offset the top slightly */
  inset-block-start: calc(anchor(bottom) + .1lh);
  inset-inline-start: anchor(left);
  inset-inline-end: anchor(right);
}

Adicione uma altura e outros estilos visuais.

ul::before {
  /* Apply your project's styles for the indicator */
  block-size: .25lh;
  background: red;
}

Por fim, adicione uma transição às propriedades inset.

ul::before {
  @media (prefers-reduced-motion: no-preference) {
    /* MANDATORY: The transition must be wrapped in a prefers-reduced-motion media query to respect user preferences. */
    transition: inset .2s;
  }
}

Esse é apenas um indicador visual e não deve substituir a definição dos valores de ARIA aria-current="page" ou aria-selected adequados.

<!-- MANDATORY: Provide explicit assistive technology state alongside the visual tab underline -->
<nav aria-label="Primary">
  <ul>
    <li class="active">
      <a href="/home" aria-current="page">Home</a>
    </li>
    <li>
      <a href="/about">About</a>
    </li>
  </ul>
</nav>

Estratégias de fallback

Se o posicionamento de âncora não for compatível com o navegador, use um border-bottom para adicionar um sublinhado. Ele não será animado.

ul li.active {
  @supports not (position-anchor: auto) {
    /* Choose a color appropriate to the app theme. */
    border-bottom: .25lh var(--primary) solid;
  }
}