Are you annoyed of the dotted outline around link when it gains focus or get active? Well, most of us use Firefox, and by default Anchor links have dotted outline around them, when they get active or gain focus. Below screenshot which will clear you more:
Dotted outlline around link
Usually outlines around small size links don’t get in notice, but if a link is “h1” heading then it really affects the readability. Also the websites which are using content sliders, you will notice the navigation arrows have big dotted lines around them and floated from left which looks more ugly and. Just like one in the screenshot below:
Dotted Line on Content Slilder
How to remove ?
Many instances we find these outline important as they justify us about the link, but few instances like the content sliders or floated items, it really looks undesired. In this article, I will share a simple tweak to override the browser’s default css, and it will remove dotted outline around all links.
a {
outline: 0;
}
Copy-Paste the above code snippet in the Style.css file of the website or blog. If we don’t want to remove outline completely, for instance active state of links should have outline enabled and removed for focus and mouseover states. The code for the scenario will look like as give below:
a: hover, a:focus {
outline: 0;
}
Copy-Paste the above code snippet in the Style.css file of the website or blog. Further save and refresh to see the effect, you will find the outline is not visible while links gaining focus.
We come to the end of this article, though it was a three line code and but important for many of us. If you have any query or any further assistance required post comments as your feedback.