Firefox hyperlink click to remove the expanded unsightly dotted line solution _ experience exchange

In Firefox, When you click a link, a dotted border appears around it. This example is used everywhere. When I write this article in the WordPress background, I click the widgets on the right to see this problem (the top right corner of the image). In some special cases, for example, when you create a navigation menu, the validity period may be very bad because Firefox will incorrectly expand the border of the link:
Enter about: config in the address bar of Firefox, and press Enter. There is a configuration item called "browser. display. focus_ring_width", which is changed to 0. The border will not appear when you click the link. In this case, the border is not indicated when the focus falls on the button. As a developer, setting this attribute in a browser is nothing more than hiding your ears.
This is actually the outline attribute that Firefox adds to this label when it is in the focus state (pseudo selector-a: focus.
The correct solution is to add a rule to CSS:
A {
Outline: none;
}
Or narrow down the scope:
A: focus {
Outline: none;
}
The latter causes the left mouse button to be pressed on the link, and the outline of the dotted line will still be displayed during this period of time.
Most of my websites write this rule in CSS. Maybe Firefox should consider removing the default outline.