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

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

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

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

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