Стилизуем посещённые ссылки

Абсолютно все браузеры (хотя возможны и исключения) могут отличать посещенные и непосещенные ссылки. Если воспользоваться данной функцией, то можно получить достаточно красивый результат. Например, добавить фоновую картинку с галочкой.

Можно было бы использовать псевдо-классы CSS before или after, но, к сожалению Internet Explorer не в состоянии их понять. Поэтому можно просто добавить фоновую картинку:

a:visited {
    padding-left: 8px;
    background: url('visited.gif') center left no-repeat;
}

Но здесь есть небольшое замечание: из-за использования отступа ссылка при наведении станет шире. Соответственно, дизаин может поплыть. Чтобы этого не произошло, можно задать отступ у еще не посещённой ссылки:

a {
    padding: 0px 4px;
}
a:visited {
    padding-left: 8px;
    background: url('visited.gif') center left no-repeat;
}

Источник: https://www.kobzarev.com/browser/stylizing-visited-links/

Михаил Кобзарёв

Суровый русский тимлид. Жил в Магадане, в офисе московских веб студий и в Тульской деревне. Виртуозно знает WordPress, PHP, ООП, Vue.js и вот это вот все. Делает крутые высоконагруженные сайты, поэтому уже почти захватил весь рынок WordPress разработки в России. Не дает никому делать сайты без спроса. Ведет блог о разработке, дайджест в телеграмме и в ВК. Любит сиськи, баню и радиоэлектронику. 100% патриот (но это не точно). Тролль 542 уровня. Ездит в отпуск раз в 5 лет.

Добавить комментарий

%d такие блоггеры, как: