Como mudar a cor do texto ao clicar

Galera, preciso de uma ajudinha no css. Quero mudar a cor do texto ao clicar nele, mas apenas no ato do clique. Montei o código abaixo:

<section class="navegacao">
            <nav>
                <ul>
                    <li class="navegacao__texto">
                        <span class="navegacao__icone"></span>
                            <a href="#">Consultas</a>
                    </li>
                    <li class="navegacao__texto">
                        <span class="navegacao__icone"></span>
                            <a href="#">Clientes</a>
                    </li>
                    <li class="navegacao__texto">
                        <span class="navegacao__icone"></span>
                            <a href="#">Relatórios</a>
                    </li>
                    <li class="navegacao__texto">
                        <span class="navegacao__icone"></span>
                            <a href="#">Menu</a>
                    </li>
                </ul>
            </nav>
        </section>

.navegacao__texto{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.navegacao__texto a{
  color: var(--cinza-escuro);
  font-size: 12px;
  text-decoration: none;
}

.navegacao__texto:hover a{
  color: var(--azul);
}

.navegacao__texto:active a{
  color: var(--azul);
}

Porém quando eu clico no texto, a cor permanece lá. Eu quero que a cor mude e volte ao original. Segue imagem de como está a página atualmente: