Оформление внешних ссылок с помощью CSS

Привет! Вы наверно замечали, как на крупных порталах оформлены ссылки, ведущие на другие сайты? Для наглядности приведу в качестве примера Википедию, где они отмечены особым образом:

Вы заметили маленький значок, который расположен рядом с каждой из ссылок? Один из них я специально подчеркнул красной линией.

Для пользователя это простой визуальный сигнал, говорящий о том, что при нажатии на такой URL-адрес он перейдет на другой сайт. Сегодня я расскажу Вам, как с помощью CSS красиво оформить внешние ссылки на сайте.

Я предлагаю рассмотреть два различных варианта:

• добавление текста с предупреждением о переходе на другой сайт;
• добавление графической иконки — это может быть изображение или иконочный шрифт.

Добавление к внешним ссылкам текстовой подсказки

Сначала давайте разберем первый вариант и добавим в конце ссылки простое текстовое предупреждение, это может быть любое слово или словосочетание. Желательно не использовать длинные обороты речи. Особое внимание обратите на свою целевую аудиторию — смогут ли посетители понять что скрыто за этой фразой.

Добавьте следующий код в файл таблицы стилей stylesheet.css Вашей темы:

a[href^="http://"]:not([href*="webliberty.ru"]):after,
a[href^="https://"]:not([href*="webliberty.ru"]):after,
a[href^="ftp://"]:not([href*="webliberty.ru"]):after {
	content: "(Переход на другой сайт)";
	padding-left:5px;
}

Что выполняет данная функция? Сперва идет проверка, совпадает ли домен с текущим, при этом анализируются два протокола интернет-соединения — HTTP и защищенный протокол HTTPS, а также соединение по FTP. В том случае, если домен целевого URL не совпадает с текущим, то в конце ссылки с отступом 5 пикселей добавляется текст. В моем примере свойство CSS content генерирует сообщение, заключенное в кавычках. Наглядный пример:

В данном примере смените доменное имя webliberty.ru на свое. Используйте идентификаторы id и классы class, чтобы применить эти правила CSS к определенным блокам контента.

Как добавить рисунок к внешним ссылкам

Переходим ко второму варианту. Теперь давайте добавим иконку до или после URL анкора. В этом нет ничего сложного, в качестве иконки используется обычная картинка, например, такая

Код, который необходимо добавить в stylesheet.css:

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

Не забывайте указывать свой домен и путь к файлу изображения, используемого в качестве графической иконки. Вместо картинки можно использовать иконочный шрифт, который отлично масштабируется и не будет создавать лишних http-запросов к серверу.

В таком случае внешняя ссылка будет выглядеть следующим образом:

Внешняя ссылка

Допустим, Вам необходимо добавить иконку не после ссылки, а перед ней, в таком случае вместо псевдоэлемента :after используйте :before и смените отступы:

a[href^="http://"]:not([href*="webliberty.ru"]):before,
a[href^="https://"]:not([href*="webliberty.ru"]):before,
a[href^="ftp://"]:not([href*="webliberty.ru"]):before {
	content: "" url('/images/external.png');
	padding-right:5px;
}

Иконка в таком случае будет расположена слева от анкора:

Внешняя ссылка

Напоследок предлагаю совместно обсудить сразу два вопроса:

• Повлияет ли применение такой фишки на юзабилити сайта?
• Каким образом это отразится на кликабельности ссылок?

На этом небольшой урок по стилизации ссылок подошел к концу, оставляйте свои комментарии, если появятся вопросы — задавайте, с удовольствием на них отвечу.