По умолчанию, когда ссылка находится в активном состоянии или при наведении, появляется пунктирная линия (или сплошная рамка) вокруг нее, примерно как показано на рисунке ниже.
Это используется в качестве указателя для пользователей, которые имеют доступ к сайту только с клавиатуры, технически с помощью клавиши табуляции Tab. Контур показывает пользователям, что они в настоящее время фокусируются на определенном элементе. Тем не менее, иногда это может сильно навредить дизайну сайта, поэтому с помощью следующих правил CSS можно избавиться от такого эффекта.
1 2 3 | a:hover, a:active, a:focus { outline: 0; } |
Стилизация Outline
Однако мы также можем и управлять этим эффектом по своему усмотрению. Мы можем указать стиль контура, ширину и цвет. Учитывая пример из предыдущего рисунка, мы можем установить стиль контура, следующим образом.
1 2 3 4 | a:active, a:focus { outline: 2px solid #e9841d; } |
Или вовсе заменить выделение линией на фоновый цвет или картинку.
1 2 3 4 5 | a:active, a:focus { outline: 0; backgrond-color: #e9841d; } |
Источник статьи/урока: https://xozblog.ru
По материалам: http://www.hongkiat.com/blog/css-dotted-outline/