2015
19
Март

Внешние ссылки на сайте



Часто в своих статьях приходится использовать ссылки на другие ресурсы интернета. Особенностей в выделении внешних ссылок, кроме атрибута target="_blank" или title не использовали. Время идет, многое меняется. С помощью свойств CSS можно изменить внешний вид ссылки на внешние ресурсы

Можно использовать цвет ссылки, выделить с помощью подчеркивания или в виде рамки. Возможностей много, но мы попробуем сделать выделение с помощью иконки. Пример использования иконки можно увидеть в Википедии. Для внутренних ссылок сайта используем путь с помощью href="/", для выделения внешних ссылок прописываем href=”http://putnyided.ru”.


Для внутренних ссылок достаточно указать свой домен, ссылки. Отличающиеся ссылки от вашей будут иметь иконку или надпись. Любой посетитель будет видеть ссылку, ведущую на внешний ресурс сайта, будет открываться в новой вкладке или окне.

Добавление графической иконки


В файл стилей добавим свойства:


a[href^="http://"]:not([href*="valvas.ru"]):after, a[href^="https://"]:not([href*="valvas.ru"]):after, a[href^="ftp://"]:not([href*="valvas.ru"]):after { content: "" url('../images/ikonka_href.png'); padding-left:5px; }

Обратите внимание, вы должны обязательно указать свой домен и правильно прописать путь к иконке.

Пример можете посмотреть здесь.

Для стилизации внешних ссылок можно использовать различные иконки.

Иконка для внешних ссылок –