Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

Выделение внешних ссылок с помощью CSS

Выделение внешних ссылок с помощью CSS

При написании статей мы так или иначе нет-нет да используем на внешние сайты, это могут быть на первоисточники, различные веб-приложения, каталоги и т.д. Большинство из нас никак не выделяет внешние , чаще ограничиваясь атрибутом target="_blank" в ссылке, определяющим открытие этой самой ссылки в новом окне, ну, или же стандартные подсказки через атрибут title.
Давайте рассмотрим простейший пример того, как с помощью нескольких строк , можно визуально выделить из общего массива, все ссылки на внешние сайты.
Стилизовать ссылки, как вы знаете, можно по разному, выделить цветом, подчёркиванием и т.д. Мы же рассмотрим вариант использования маленькой иконки, которая выглядит как окно со стрелкой, самый яркий пример можете лицезреть в Википедии.
И так, у нас есть внутренние ссылки и внешние. Если внутри сайта, в ссылках используется не абсолютный путь в адресе href="/", для того чтобы выделить все внешние ссылки, в которых по определению прописан абсолютный адрес href="/", достаточно в файл стилей .css добавить следующее:
 

a[href ^= "http"]:after,
a[href ^= "http"]:after {
    content: " " 
    url('external-link-icon.png');    
}

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

a[href^="http://"]:not([href*="example.com"]):after,
a[href^="http://"]:not([href*="example.com"]):after{
    content: " "
    url('external-link-icon.png');
}

Посмотреть живой пример и поковыряться в коде можете здесь:
 

 
Ну и в завершение — сама иконка:

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

С Уважением, Андрей .

Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 3

  • NeedHate: 13 февраля, 2015 в 15:01

    Андрей, вы бы уже fontawesome использовали. А то несерьезно как-то. 8)))

    Ответить
    • driver: 13 февраля, 2015 в 15:24

      Да ладно ))) Пример задан, а там хоть…

      Ответить
  • GreenEyesMan: 14 ноября, 2017 в 14:59

    Добрый день.
    Спасибо за инструкцию. Помогает отделить внутренние ссылки от внешних. Но хотелось бы уточнить, а как можно отключить этот эффект для внешних ссылок оформленных с помощью css, а так же для картинок с внешней ссылкой?

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>