Выделение внешних ссылок при помощи CSS3
Простой способ обозначить на сайте внешние ссылки специальной картинкой. При этом картинка добавляется автоматически.
Во-первых, о чем речь? Внешние ссылки — ссылки на другие сайты, внутренние ссылки — соответственно, на внутренние страницы собственного сайта.
С внешними ссылками все понятно. Если мы ссылаемся на Гугл, например, то пишем полный адрес http://www.google.com/. Префикс http:// и означает, что ссылка внешняя.
Внутренние ссылки также могут начинаться с этого префикса. Тогда они будут называться абсолютными. Если же мы напишем ссылку в виде: /about.html, то это будет уже относительная ссылка, которая показывает, что путь к странице about.html лежит от корня сайта.
Зачем же их (внешние ссылки) как-то выделять? Да просто для информирования посетителя, что ссылка идет на другой ресурс. Это что-то вроде сетевого этикета.
Реализовать такое выделение можно, используя новые возможности, которые предоставляет CSS3. Смысл таков: когда мы в тексте вставляем ссылку на внешний ресурс, то она автоматически добавляет иконку-стрелку 
.
Чтобы это заработало, нужно в листе стилей CSS для тэга a прописать следующее правило:
a[href^="http://"]:not([href*="websovet.com"])::after {
content: url(external.png);
}
Поясним, что тут и зачем. Когда в тексте появляется внешняя ссылка с префиксом http://, то данный код сразу за ссылкой при помощи ::after подставляет в строку картинку content: url(external.png);.
При этом исключается наш собственный домен — :not([href*="websovet.com"]). Таким образом, если вы ссылаетесь на чужой сайт, то стрелка появляется, а если на страницы собственного, то нет.
Все замечательно, кроме одного: эту конструкцию поддерживают не все браузеры. Работает в Firefox, IE 7, Opera 9,5.
Другим решением, которое работает во всех в некоторых более ранних браузерах (например, Опера 9,1), будет следующая запись:
a[href^="http://"] {
background: url(external.png) no-repeat 100%;
padding: 0 10px 0 0;
color: #069;
}
Здесь мы просто показываем, что все ссылки с префиксом http:// будут иметь в качестве фона картинку со стрелкой. Значение в 100% помещает картинку в крайнем правом положении.
Однако такой код не распознает где ссылка на внешний ресурс, а где на свой собственный. Поэтому придется все свои внутренние ссылки прописывать в виде относительных.
