Comment changer la couleur d'un souligné au clic ?

Bonjour,
J'ai une navbar avec caractères blancs, ces derniers deviennent noirs lors du clic (menu "shrink"). Mais je ne trouve pas de solution pour que le souligné change aussi de couleur :(
Je vous laisse les CSS :

/* nav */
#menutop nav .navbar-nav {
 margin:0 10px 0 0 !important;
 padding:0 !important;
 font-size: 0.8em;
}
#menutop nav .navbar-nav a {
 display: block;
 color: 
white;
 padding: 10px 6px 10px 0;
 line-height: 1.3em !important;
 font-family: 'Raleway', sans-serif;
 text-align:right;
 font-size: 1.3em;
}
#menutop nav .navbar-nav a:hover {
 color: 
white;
 filter: brightness(1.75);
}

nav li {
    display: inline-block;
    overflow:hidden;
    vertical-align: middle;
}
nav ul li:last-child {
    margin-right:0;
}
nav li a{
   display:block;
   padding: 8px 0;
   position:relative;
   font-size:1em;
   transition:font-size 0.2s;
}
nav li a::before {
    content:"";
    width:0;
    height:2px;
    background: 
white;
    position:absolute;
    bottom:0;
    left:50%;
    right:0;
    transition:all 0.2s;
}
nav li a:hover::before {
    min-width:100%;
    left:0;
}

/* ------------ */
/* Transitions and class for reduced height */
#menutop,
#menutop .navbar-brand,
#menutop .navbar-brand img,
#menutop nav .navbar-nav,
#menutop nav .navbar-nav a,
#menutop.menu-shrink {
 -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;
}
/* ------------ */
/* menu-shrink */
#menutop.menu-shrink {
 height: 80px;
}
#menutop.menu-shrink:hover {
 background-color: 
rgba(255,255,255,0.5);
}
#menutop.menu-shrink .navbar-brand {
 width: 75px;
 padding-left: 4px;
 padding-top: 4px;
}
#menutop nav .navbar-nav {
 padding-top:15px !important;
}
#menutop.menu-shrink nav .navbar-nav a {
 font-size: 1.3em;
 color: 
black;
}

Merci pour votre aide :)
LM