Code CSS pour créer un effet de soulignement au menu, testé sur WordPress FSE uniquement et le thème Spectra One.

/* ----- MENU ----- */

/* Animation soulignement fluide de couleur au survol */
.wp-block-navigation-item__content {
  position: relative;
  display: inline-block;
  padding-bottom: 4px; /* un peu d’espace pour l’animation */
  text-decoration: none;
}

.wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 0;
  background-color: #790089;
  transition: width 0.3s ease-in-out;
}

.wp-block-navigation-item__content:hover::after {
  width: 100%;
}

Ajout du mot ‘Fermer’ devant la croix du menu sur tablette et mobile, ainsi qu’un changement de couleur au passage de la souris.

/* ----- BT Fermeture et mot Fermer ----- */
.wp-block-navigation__responsive-container-close {
    display: inline-flex; /* Utilise flexbox pour l'alignement */
    align-items: center; /* Centre verticalement les éléments */
    gap: 8px; /* Ajoute un espace entre le texte et la croix */
}

.wp-block-navigation__responsive-container-close::before {
    content: "Fermer";
}

.wp-block-navigation__responsive-container-close:hover {
    color: red; /* Change la couleur du texte en rouge au survol */
}

.wp-block-navigation__responsive-container-close:hover svg path {
    fill: red; /* Change la couleur de la croix en rouge au survol */
}