Subrayado de la pestaña de posicionamiento de anclaje

En un menú de pestañas, debes proporcionar sugerencias visuales a los usuarios sobre la página en la que se encuentran. Una opción es subrayar la pestaña. Con el posicionamiento de anclas, puedes crear una animación fluida entre las posiciones del subrayado. Esto no funciona cuando, al cambiar la pestaña activa, se carga una página web nueva.

También puedes usar este efecto para agregar un punto animado que indique la pestaña activa en una barra de pestañas vertical.

Crea el subrayado con un pseudoelemento ::before en el <ul> que contiene los elementos <li>. Usar un seudoelemento es el enfoque preferido, ya que mantiene el DOM limpio y evita agregar elementos adicionales para efectos puramente decorativos.

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

Convierte el elemento de lista activo en un ancla agregando la propiedad anchor-name, que tiene un valor que comienza con --.

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

Vincula el subrayado al ancla del elemento activo con un position-anchor que coincida con el anchor-name del ancla y haz que sea position: absolute.

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

Posiciona el subrayado en relación con el ancla usando las propiedades de inserción y las funciones 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);
}

Agrega una altura y otros estilos visuales.

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

Por último, agrega una transición en las propiedades 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;
  }
}

Este es solo un indicador visual y no debe reemplazar la configuración de los valores de aria aria-current="page" o aria-selected adecuados.

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

Estrategias de resguardo

Si el navegador no admite el posicionamiento de anclaje, usa un border-bottom para agregar un subrayado. No se animará.

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