Главная / Мой вордпресс / Как отметить посещенные ссылки

Как отметить посещенные ссылки

посещенные ссылкиВ этой статье мы рассмотрим способы, с помощью которых можно сообщить пользователю, что он уже переходил по данной ссылке. Если вас не устраивает стандартный способ подсветки цветом, то эта статья для вас.

Для того, чтобы разукрасить наши ссылки, воспользуемся псевдоклассом :visited, который предоставлен нам CSS. Обратите внимание, что некоторые способы не работают в Internet Explorer.

Перечеркивание

Самым простым способом является перечеркивание посещенных ссылок. Делается это достаточно просто, с помощью одной строчки в CSS файле:

a:visited {
 text-decoration: line-through;
}

Фоновое изображение

Очень интересным способом является показ галочки после текста ссылки, которая показывает, что мы уже тут были. Для этого подготовим заранее картинку с галочкой, размером 10 на 10 точек. Для того, чтобы нарисовать картинку после ссылки, оставим место справа от ссылки. Например, 12 пикселей:

a:visited {
 padding-right: 12px;
}

Потом добавим фоновое изображение и выставим его положение:

a:visited {
 padding-right: 12px;
 background: url(visited.gif) no-repeat 100% 50%;
}

Добавим эффект наведения мышкой:

a:visited:hover {
 background-image: url(visitedh.gif)
}

 

А теперь сделаем так, чтобы текст ссылки тоже подсвечивался при наведении мышки:

a:visited {
 padding-right: 12px;
 background: url(visited.gif) no-repeat 100% 50%;
 color: #aaa;
 text-decoration: none;
}
a:visited:hover {
 background-image: url(visitedh.gif);
 color: #f00;
}

 

Псевдоэлементы :before и :after

После того, как мы разобрались с простыми способами, посмотрим, что можно сделать с помощью продвинутых псевдоэлементов. Они дают нам больше возможностей для решения наших задач, но к сожалению не поддерживаются Internet Explorer.

a:visited:after {
 content: " (Visited)";
}

Мы добавили текст Visited справа от ссылки
А если код написать вот так:

a:visited:before {
 content: "(Visited) ";
}

То мы увидим текст Visited слева от ссылки

Естественно, что примеры выше не имеют практической ценности, но они дают нам интересную пищу для размышлений. Попробуем добавить к тексту ссылок более короткий текст.

a:visited:after {
 content: " (ok)";
 font-size: 70%;
}

Смотрится неплохо. А если уменьшить размер шрифта надписи ОК ?

a:visited:after {
 content: " (ok)";
 font-size: 60%;
 text-transform: uppercase;
}

Уже лучше. А теперь сделаем надпись серым цветом, чтобы она не бросалась в глаза:

a:visited:after {
 content: " (ok)";
 font-size: 60%;
 text-transform: uppercase;
 color: #777;
}

А в этом варианте, при наведении мышкой на ссылку, мы выводим текст с предупреждением, что мы тут уже были:

a:visited:after {
 content: " (ok)";
 font-size: 60%;
 text-transform: uppercase;
 color: #777;
}
a:visited:hover:after {
 content: " (Visited!)";
 font-size: 80%;
 text-transform: uppercase;
 color: #f00;
}

Заключение

Мы рассмотрели несколько способов подсветки ссылок. Все зависит от вашей фантазии, но не забывайте о главном, текст на странице должен быть читаемым.

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*