Comment mettre un couleur sur un élément actif

bonjour a tous

j'ai une pagination mais je souhaiterais pouvoir ajouter quelques effets visuel comme par exemple donner une couleur lorsque le numéro de page est actif , j'ai trouve pour le passage de la souris mais impossible pour active

voici tout d abord le code de la pagination

  <nav>
  <ul class="pagination">
    <!-- Lien vers la page précédente (désactivé si on se trouve sur la 1ère page) -->
    <?php
    //première page 
      if($currentPage >2 ){
        echo getNavLink($currentPage,1 );
      }
    
      //page actuelle moins 1
      if($currentPage >1 ){
        echo  getNavLink($currentPage,$currentPage -1);
      }
     
      //page actuelle 
      echo getNavLink($currentPage,$currentPage  )     ;
      
        //page actuelle plus 1
      if($currentPage < $pages  ){
        echo getNavLink($currentPage,$currentPage +1);
      }
      
      //Dernière page
      if($currentPage < $pages - 1 ){
        echo getNavLink($currentPage,$currentPage +2);
      }
      
    ?>
  </ul>
</nav>

et voici la ligne sur laquelle je dois effectuer cet effet

     //page actuelle 
      echo getNavLink($currentPage,$currentPage  )     ;

lorsque j applique ce code en css lors du survol de la souris la couleur du numéro de page change

.page-link:hover {
 
    color: red;
    
}

par contre avec ce code rien ne passe lorsque la page est active

.page-link:active {
 
    color: #ffff;
    
}