Во-первых, о чем речь? Внешние ссылки — ссылки на другие сайты, внутренние ссылки — соответственно, на внутренние страницы собственного сайта. С внешними ссылками все понятно. Если мы ссылаемся на Гугль, например, то пишем полный адрес http://www.google.com/. Префикс http:// и означает, что ссылка внешняя.

Внутренние ссылки также могут начинаться с этого префикса. Тогда они будут называться абсолютными. Если же мы напишем ссылку в виде: /about.html, то это будет уже относительная ссылка, которая показывает, что путь к странице about.html лежит от корня сайта.

Во-вторых, зачем их (внешние ссылки) выделять? Да просто для информирования посетителя, что ссылка идет на другой ресурс. Это что-то вроде сетевого этикета.

Реализовать такое выделение можно, используя новые возможности, которые предоставляет CSS3. Смысл таков: когда мы в тексте вставляем ссылку на внешний ресурс, то она автоматически добавляет иконку-стрелку . Чтобы это заработало, нужно в листе стилей CSS для тэга «а» прописать следующее правило:

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

Автор: Игорь Квентор

По материалам сайта: http://www.websovet.com/