cómo eliminar la línea de puntos alrededor del elemento en el que se hizo clic en html

Descubrí que si hay un aenlace en la página que no enlaza con una nueva página, cuando el usuario haga clic en él, habrá una línea de puntos alrededor del elemento, solo desaparecerá cuando el usuario haga clic en cualquier otra cosa de la página, ¿cómo para eliminar esto?

Ejemplo:

Tenga en cuenta la línea punteada alrededor del elemento Section 2.

Utilizar outline:nonepara anclar la clase de etiqueta

Como dijo @Lo Juego, lee el artículo

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

a {
    outline: 0;
  }

Pero lee esto antes de cambiarlo:

quitando-el-contorno-punteado

Prueba con !importantin css.

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

Eliminar todos los esquemas adorados, incluidos los de los 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: Debe agregar el enlace href para bootstrap css antes del css principal, para que bootstrap no anule su estilo.

La eliminación outlinedañará la accesibilidad de un sitio web. Por lo tanto, lo dejo ahí, pero lo hago invisible.

a {
   outline: transparent;
}

En mi caso fue un botón, y aparentemente, con botones, esto es solo un problema en Firefox. Solución encontrada aquí :

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

Es simple probar debajo del código:

a{
outline: medium none !important;
}

¡Si feliz salud! Buen día