Оформление внешних ссылок с помощью 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 анкора. В этом нет ничего сложного, в качестве иконки используется обычная картинка, например, такая external

Код, который необходимо добавить в 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-запросов к серверу.

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

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

Допустим, Вам необходимо добавить иконку не после ссылки, а перед ней, в таком случае вместо псевдоэлемента :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;
}

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

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

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

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

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(4 голоса, в среднем: 2.8 из 5)
  1. Алексей

    Привет Денис! Хорошая статья как и все остальные. На счет того как это повлияет на юзабилити сайта и кликабельность ссылок сказать не могу, т.к. я в этом деле еще новичок. Но думаю, что какое никакое влияние все равно окажет. И как мне кажется в лучшую сторону. А вот оформлять внешние ссылки таким образом или нет это дело каждого 🙂

    Ответить

  2. Андрей Andrdov

    Добрый день! Статья действительно интересная, результат можете посмотреть на моем блоге но я это делал сам 🙂 Могли бы оценить мой блог. Большое спасибо)

    Ответить

  3. Webliberty

    Привет, Алексей, спасибо! Главное чтобы влияние было положительным) На мой взгляд, это удобно пользователям.

    Андрей, приветствую! Посмотрел, выглядит отлично 😎 На своем блоге сделаю попозже, но не картинкой а шрифтом, тем более он уже подключен и используется, грех не воспользоваться)

    Ответить

  4. Freethinker

    Абсолютно беспонтовая фигня. Для подбавляющего большинства сайтов достаточно target="_blank", чтобы наличие внешней ссылки не сказалось на юзабилити. А осознание посетителем факта, что ссылка внешняя, совершенно не отразится на юзабилити. Интересное украшательство, не больше.

    Ответить

  5. Webliberty

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

    Но есть и другая категория людей, которым важно оставаться на сайте, как правило это постоянная аудитория.

    Ответить

  6. Freethinker

    Webliberty, и опять же все сводится к моим утверждениям:
    1) Если ссылка откроется в новом окне, технически пользователь не уйдет с сайта. Кому важно остаться на сайте, получат свое.
    2) Осознание пользователем факта, внутренняя ссылка или внешняя, не отражается на его поведении на сайте.

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

    Ответить

  7. Егор

    Спасибо 😎 Пойду ставить 😉

    Короче я их установил и сразу убрал. Не подумал, картинки повылезали в разных неожиданных местах. Это если присваивать класс, тогда можно использовать. А потом все-таки применил класс к a. В постах буду выводить, да мало ли где еще.

    Я сейчас пошел немного дальше, Font Awesome подключил.

    Ответить

  8. Webliberty

    Егор, все верно сделали, я тоже использую этот шрифт, только не для оформления ссылок, а в списке рубрик и кнопках социальных сетей)

    Ответить

  9. Molotoff

    Здравствуйте! А возможно ли применение атрибута onmouseover к внешней ссылке? Если возможно, то как его применить? Как выглядит данный CSS код?

    Ответить

  10. Webliberty

    Этот атрибут предназначен для выполнения скрипта при наведении указателя на элемент, в CSS его не применить. В зависимости от задачи, можете посмотреть в сторону использования псевдокласса :hover и с его помощью менять внешний вид внешней ссылки при наведении.

    Ответить

  11. Сергей

    Я ломаю голову, как обозначить ссылки страниц на своем же сайте, которые должны открываться в новой вкладке. Всего сайт использует шесть типов ссылок:

    1. внешняя ссылка на сторонний ресурс
    2. внешняя ссылка на свой демо-ресурс
    3. внутренняя ссылка в новой вкладке
    4. внутренняя ссылка в этой же вкладке
    5. якорная ссылка на другое место этой страницы
    6. якорная ссылка для разворачивания свернутого элемента

    Точнее как обозначить их ясно, либо CSS либо JQuery, только вот есть ли какая-то система обозначений? 😎

    Ответить

  12. Webliberty

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

    Вы планируете для каждого типа ссылок своё оформление придумать? Смотрите, чтобы пользователи не запутались в обозначениях. Лучше сократить список и придумать интуитивно понятные решения.

    Ответить

:) ;) :D :( :cry: :| :o :P 8-) :oops: :roll: :idea:

Отправляя комментарий, вы соглашаетесь с политикой конфиденциальности.