Верх страницы
Обложка к записи Стилизуем посещённые ссылки
Время для прочтения: 0 мин. 9 сек.

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

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

Можно было бы использовать псевдо-классы 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;
}

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

Русский разработчик с 20-ти летним стажем. Работаю с PHP, ООП, JavaScript, Git, WordPress, Битрикс, Joomla, Drupal, Opencart, DLE, Laravel, Moonshine, SuiteCRM.

Оптимизирую сайты под Google Page Speed, настраиваю импорты для больших магазинов на WooCommerce + WP All Import. Пишу плагины на заказ. Все мои услуги.

Веду блог о разработке, дайджест в телеграмме и в ВК.

Вы всегда можете нанять меня.

Предыдущая запись

Давайте дружить
в Телеграме

Авторский блог вашего покорного слуги в Telegram про web, программирование, алгоритмы, инструменты разработчика, WordPress, Joomla, Opencart, Laravel, Moonshine, фильмы и сериалы