クリックした時の点線を消す

文字リンクをcssで画像に置き換え、いらなくなった文字をtext-indentで画面の外に飛ばした場合、
リンク画像をクリックした時に画面の外まで点線がつづいてしまいます。
クリックした時の点線を消す
こんなイメージ
ブラウザーや環境によってはもともと見えない場合もあります)

点線を消すには

a {
outline: none;
}
点線を消すCSSとスクリプトより
この場合点線を消す方法として、上記の方法を使っていましたが、アクセシビリティ・ユーザービリティの観点から問題があるようです。

点線を消すには(改)

#nav li a {
overflow: hidden;
}
m-Schoolより
本来のa要素の範囲外に文字を「はみださせている」ので、上の指定で消すほうが妥当のようです。

(bossコメントありがとうございました)
ネットの情報を正しく理解するには経験が必要ですね