CSS оформление ссылок

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

Способ 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: "\221A\00A0";}

Где \00A0 — неразрывный пробел, а \221A — знак квадратного корня, √ Размер, цвет и стиль текста “до” и “после” задается так же, как и обычно:

a:visited:before {
color: #25A30A;
text-decoration: none;
content: "\221A\00A0"
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 задается по аналогии с предыдущим примером.

Запись навигация

Top