Главная -> CSS -> 5 способов красивого оформления посещенных ссылок с помощью CSS

5 способов красивого оформления посещенных ссылок с помощью CSS

Как правило, вы не найдете на большинстве сайтов отдельных стилей для оформления посещенных ссылок, так называемого :visited псевдокласса. По правде сказать, это и не всегда надо. Но если структура сайта достаточно грамоздка, или вы часто используете списки (например, перечень статей), то будет не лишним предусмотреть вывод отдельного стиля для уже посещенных ссылок.

Demo и Скачать

Способ 1. Цвет ссылки
Проще всего будет выделить посещенную ссылку другим цветом. Но не рекомендую устраивать пожар в Африке. Например, если ссылки в тексте выделены красным цветом, то посещенную ссылку можно сделать темно-красного или бардового цвета


a:link {color: #FF0000; text-decoration: none;}
a:visited {color: #990000; text-decoration: none;}

Способ 2. Перечеркивание
Очень часто подчеркивание используют для стилизации ссылки непосредственно под курсором, a:hover. Вы так же можете использовать подчеркивание и для посещенной ссылки. Но, чтобы не возникало путаницы, текст можно перечеркнуть.

a:visited {color: #25A30A; text-decoration: line-through;}

Способ 3. Цвет фона
Уже более интересный в плане оформления способ, но как правило используется для положения курсора поверх ссылки, a:hover. Так что будьте осторожны.


a:link {
color: #25A30A;
text-decoration: underline;
background-color: transperent;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #77B575;
}

Способ 4. Фоновая картинка
Уже более интересный в плане оформления способ, но как правило используется для положения курсора поверх ссылки, a:hover. Так что будьте осторожны.


a:link {
color: #25A30A;
text-decoration: underline;
}
a:visited {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;
}

Немного усложним задачу, добавив смену фоновой картинки для уже посещенной ссылки при наведении курсора:


a:visited {
color: #888888;
text-decoration: none;
background: url(visited-icon.gif) no-repeat 0% 50%;
padding-left: 12px;
a:visited:hover {
color: #25A30A;
background: url(visited-icon-hover.gif) no-repeat 0% 50%;
}

Способ 5. Использование псевдоэлементов :before, :after
Будьте осторожны, в IE 6 данный способ не работает. Поэтому сами решайте использовать его или нет в качестве оформления ссылок. :before и :before автоматически добавляют содержимое соотвественно до и после указанного элемента, в нашем случае это ссылки.


a:visited:before {
color: #25A30A;
text-decoration: underline;
content: "(ok) ";
}
a:visited:after {
color: #25A30A;
text-decoration: underline;
content: " (ok)";
}

Помимо текста можно использовать unicode символ, например:


a:visited:before {
color: #25A30A;
text-decoration: none;
content: "221A0A0";
}

Где 0A0 неразрывный пробел, а 221A знак квадратного корня, v Размер, цвет и стиль текста до и после задается так же, как и обычно:


a:visited:before {
color: #25A30A;
text-decoration: none;
content: "221A0A0"
text-transform: uppercase;
font-size: 10px;
}

Смена текста элементов :before и :after в ссылке при наведении курсора задается следующим образом:


a:visited:after {
color: #25A30A;
text-decoration: underline;
content: " (ok)";
}
a:visited:hover:after {
color: #25A30A;
text-decoration: underline;
content: " (allready read!)";
}

Другой стиль текста для положения :hover задается по аналогии с предыдущим примером.

Demo и Скачать

Кстати, тем, кто сейчас занимается раскруткой сайта за счет покупки ссылок, рекомендую статью Покупаем ссылки правильно. Это к вопросу о правильности капиталовложений

Понравилась статья? Тогда подпишитесь на RSS, чтобы следить за обновлениями!

 

Продвижение сайтов в Республике Беларусь

Компания "Виста" предлагает продвижение сайтов в Республике Беларусь - первые 3 месяца бесплатно.