Красивое оформление нажатых ссылокНа просторах интернета вы не увидите множество красивых веб сайтов с отдельным css тегом для нажатых ссылок. Подкласс :visited. Да оно то и на большенстве сайтов не нужно, но когда у вас длиный список его как правило нужно использовать. В этой статье мы расмотрим 5 примеров дизайна как реализовать ссылку на которую уже нажали. От обычных примеров перейдем к болие практичным.
1. Изменение цвета ссылки
Это самый простой способ. Но не нужно устраивать резкие перемены. Тоесть если у вас ссылка зеленого цвета ненужно после нажатия ёё делать жолтой. Как правило ссылки делаются немного темней. Если у вас зеленая ссылка то после нажатия оно должна быть темно-зеленой.
a:link {color: #FF0000; text-decoration: none;}
a:visited {color: #990000; text-decoration: none;}
2. Перечеркивание ссылки
Многие делают это с помощью подчеркивания. Но чтобы не путаться с тем что подчеркивание используется и в обычных ссылках, то можно использовать перечеркивание.
a:visited {color: #25A30A; text-decoration: line-through;}
3. Изменение цвета фона
Этот вариант уже болие интересный... И красивей смотрится.
a:link {
color: #25A30A;
text-decoration: underline;
background-color: transperent;
}
a:visited {
color: #FFFFFF;
text-decoration: none;
background-color: #77B575;
}
4. С использованием фоновой картинки
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
Данные пвсевдоэлементы не подерживаются в ИЕ6. Хотя этот браузер некто уже не использует, но решать всёже вам.
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";
}