como remover a linha pontilhada ao redor do elemento clicado em html

Eu descobri que se houver um a link na página que não leva a uma nova página, quando o usuário clicar nele, haverá uma linha pontilhada ao redor do elemento, que só desaparecerá quando o usuário clicar em qualquer outra coisa na página, como remover isso?

Exemplo:

Observe a linha pontilhada ao redor do elemento Section 2.

Use outline:nonepara ancorar a classe de tag

Como @Lo Juego disse, leia o artigo

a, a:active, a:focus {
   outline: none;
}

a {
    outline: 0;
  }

Mas leia isso antes de mudar:

removendo o contorno pontilhado

Experimente com !importantem css.

a {
  outline:none !important;
}
// it is `very important` that there is `no` `outline` for the `anchor` tag.  Thanks!

Para remover todos os contornos pontilhados, incluindo aqueles nos bootstraptemas.

a, a:active, a:focus, 
button, button:focus, button:active, 
.btn, .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn.active.focus {
    outline: none;
    outline: 0;
}

input::-moz-focus-inner {
    border: 0;
}

Nota: Você deve adicionar link href para bootstrap css antes do css principal, para que o bootstrap não substitua seu estilo.

A remoção outlineprejudicará a acessibilidade de um site. Portanto, deixo isso lá, mas o torno invisível.

a {
   outline: transparent;
}

No meu caso era um botão e, aparentemente, com botões, isso é um problema apenas no Firefox. Solução encontrada aqui :

button::-moz-focus-inner {
  border: 0;
}

É simples tentar abaixo do código -

a{
outline: medium none !important;
}

Se felicidades! Dia bom