Sottolineatura della scheda di posizionamento dell'ancoraggio

In un menu a schede, devi fornire agli utenti suggerimenti visivi sulla pagina in cui si trovano. Un'opzione è sottolineare la scheda. Con il posizionamento degli ancoraggi, puoi creare un'animazione fluida tra le posizioni della sottolineatura. Questo non funziona quando la modifica della scheda attiva carica una nuova pagina web.

Puoi anche utilizzare questo effetto per aggiungere un punto animato che indica la scheda attiva in una barra delle schede verticale.

Crea la sottolineatura utilizzando uno pseudo-elemento ::before su <ul> che contiene gli elementi <li>. L'utilizzo di uno pseudo-elemento è l'approccio preferito, in quanto mantiene pulito il DOM ed evita di aggiungere elementi aggiuntivi per effetti puramente decorativi.

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

Rendi l'elemento dell'elenco attivo un'ancora aggiungendo la proprietà anchor-name, che ha un valore che inizia con --.

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

Collega la sottolineatura all'ancoraggio dell'elemento attivo con un position-anchor che corrisponda a anchor-name sull'ancoraggio e rendilo position: absolute.

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

Posiziona la sottolineatura rispetto all'ancoraggio utilizzando le proprietà inset e le funzioni 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);
}

Aggiungi un'altezza e altri stili visivi.

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

Infine, aggiungi una transizione alle proprietà 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;
  }
}

Si tratta solo di un indicatore visivo e non deve sostituire l'impostazione dei valori aria aria-current="page" o aria-selected appropriati.

<!-- 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>

Strategie di riserva

Se il posizionamento degli ancoraggi non è supportato nel browser, utilizza un border-bottom per aggiungere una sottolineatura. Non verrà animato.

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