Remove link outlines while preserving accessibility

While you may want to get rid of the outlines showing up when clicking on links, it's important not to completely remove focus styles ( advocates against such behavior).

Fortunately, we can preserve outline styles when tabbing, but remove them when clicking, using only CSS.

a:hover {
  outline: none;

That's it. This assumes that you can't click on something without your mouse hovering it. It won't remove outline styles or prevent tabbing through anchors. Your website stays accessible to people with screen readers.