J'ai essayé quelque chose comme ceci:

.active { border-bottom: 3px green; padding-bottom: -5px; }

Mais ça ne marche pas

Quelqu'un saurait m'aider? merci

A la place de ton padding-bottom, tu peux réduire la hauteur de la ligne.
line-height: 3em;
Par contre si t'avais un retour à la ligne dans un de tes menus, les lignes se superposeraient les unes sur les autres et ce serait illisible.
Une autre solution serait de foutre une div dans une li et de la cacher, sauf quand elle se trouve fille d'un élément ayant la classe .active

HTML
<ul>
   <li>Accueuil
       <div></div>
   </li>
   <li>A propos
      <div>/div>
   </li>
</ul>

CSS
.active div{
   display: block;
}
div{
   display: none;
   height: 10px;
   background-color: green;
   position: relative;
   bottom: 10px;
   z-index: -1;

Ça marcherais mieux avec un animate...

les pseudo éléments ::before ::after

en position absolute, une taille définie et une couleur en background.

Le 07 mars 2018 à 16:33:17 lynxapaise a écrit :
les pseudo éléments ::before ::after

en position absolute, une taille définie et une couleur en background.

Et un content:" "

Go Codepen