На многих сайтах, за примером далеко ходить не буду, «Википедия — свободная энциклопедия», наверняка вы замечали вот такие иконки  напротив, точнее, сразу за ссылкой на внешний сайт. 
В один чудесный день, это было далеко не вчера, я тоже решил организовать подобное у себя на форуме ... Но, как достаточно часто со мной случается, столкнулся с небольшой проблемкой. К счастью, мне нравится решать подобные задачки, и решение не заставило себя долго ждать. Но об этом ниже. Сейчас я хочу рассмотреть, как обычно, оформляют внешние ссылки. Решается это двумя, как минимум, способами. При помощи CSS и JavaScript.
Стилизация внешних ссылок при помощи CSS2.1Всё очень просто.
Нам всего-навсего нужно определить, что это именно внешняя ссылка, а не внутренняя или якорная. И прописать в CSS соответствующее оформление. Решений несколько. Вариант с привязкой к атрибуту «_target»HTML-код Code (HTML) <a href="/go?http://fflesh.ucoz.ru/load/" title="http://fflesh.ucoz.ru/load/" target="_blank">внешняя ссылка</a>
CSS-стили Code (CSS) a[target="_blank"]{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Всё бы хорошо, но мой "горячо любимый MSIE v6” поддерживает селекторы атрибутов ... Что, впрочем, не стало для меня неожиданностью... ヅ
Кому не всё равно, то как отображается данная ссылка в ИЕ v6, вот небольшой хак: Code (CSS) * html a{z-index:expression(runtimeStyle.zIndex=1,target=="_blank" ? (className+="outLink"):0);}
a.outLink{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Где: * html a - фильтр для Internet Explorer-а шестой версии. z-index: expression(); - оптимизированный expression, который сработает только при загрузке страницы. Единожды. className+="outLink" - добавляем нужный класс. В данном случае «outLink»
Вариант с привязкой к сигнатуре в атрибуте «href»Примерно - тоже самое, только «в профиль» ...ヅ
Будем обрабатывать только те ссылки, чей атрибут «href» начинается с протокола «http» или «https» Стиль для адекватных браузеров: Code (CSS) a[href^="http"]{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
И для не совсем ... (для ИЕ ... персонально) Code (CSS) * html a{z-index:expression(runtimeStyle.zIndex=1, this.getAttribute("href").lastIndexOf("http")==0 ? (className+="outLink"):0);}
a.outLink{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Кстати, так, на заметку.
Дабы не засорять основную таблицы стиле кучей хаков и подобным мусором, рекомендую пользоваться условными комментариями для Internet Explorer-а - «Conditional comments». А в ней уже проводить выборку по версии.
Или, как вариант, подключать несколько персональных таблиц стилей - для каждой версии. Подключение стилей для всех версий ИЕ примерно вот такое: Code (HTML) <link rel="stylesheet" type="text/css" href="/ie.css">
Их структура похожа на комментарий в HTML, поэтому остальные браузеры будут воспринимать его как обычный комментарий. Explorer же, распознаёт специальный синтаксис <!--[if IE]>, решает условие if и обрабатывает содержимое так, как если бы это было содержание нормальной страницы.
Вариант с привязкой к домену в атрибуте «href»Для браузеров поддерживающих селекторы атрибутов, не ИЕ ... ツ Code (CSS) a[href^="http"]:not([href*="fflesh.ucoz.ru"]) {background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Где: a[href^="http"] - только для ссылок, имеющих атрибут «href» начинающийся с «http»- отсеиваем якорные ссылки. :not([href*="fflesh.ucoz.ru"]) - только для ссылок, в которых нет вхождения домена сайта «fflesh.ucoz.ru». Здесь домен - «fflesh.ucoz.ru» .... ヅ ... Вот этот пример, уже интереснее ....
И НЕ поддерживающих. Для Microsoft Internet Explorer версии 6(какое число ... ヅ ) Code (CSS) * html a{z-index:expression(runtimeStyle.zIndex=1,this.getAttribute("href") ? (this.getAttribute("href").lastIndexOf("fflesh.ucoz.ru")==-1?(className+="outLink"):0):0);}
a.outLink{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Где: this.getAttribute("href") - проверяем наличие атрибута «href» как такового - отсеиваем якорные ссылки. .lastIndexOf("fflesh.ucoz.ru") - проверяем вхождение домена сайта «fflesh.ucoz.ru», если оно равно «-1» - то есть нет такого слова в этой букве, назначаем класс «outLink». Если есть - ничего не делаем ....
Как можно убедиться из примера ... ヅ ... Даже при такой выборке, всё равно, некоторые ссылки, а именно, внешняя ссылка с «/go?», сервис который нам любезно предоставили ... не срабатывает. Вот комбинация.
Не скажу, что самая «правильная», однако - работает.... Code (CSS) a[href^="http"]:not([href*="likbezz.ucoz.ru"]), a[href^="/go?"] {background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
И, нечто ... ヅ ... похожее для ИЕ v6. Code (CSS) * html a{z-index:expression(runtimeStyle.zIndex=1,this.getAttribute("href") ? ((this.getAttribute("href").lastIndexOf("likbezz.ucoz.ru")==-1 || this.getAttribute("href").lastIndexOf("/go?")>-1)?(className+="outLink"):0):0);}
a.outLink{background:url('http://likbezz.ucoz.ru/_theme/_st/img/_external.gif') no-repeat right 2px;padding-right:15px;}
Здесь - без комментариев ... Жесть ... ヅ
Я, вообще-то, когда садился писать эту заметочку, хотел написать ещё и о способе стилизации ссылок при помощи JavaScript, да чёт больно большая заметка получилась ... неожиданно.
Сначала решил разбить на две части - CSS-способ и JavaScript ... Заодно и сравнить плюсы и минусы того и другого способа. Но ....
Стилизация ссылок при помощи JavaScript (JQuery)Ссылки и нас есть .... осталось отыскать среди них все внешние, и установить для них наш, уже прописанный, класс «outLink».
Можно сразу же добавить атрибут «target='_blank'» для тех ссылок, у которых он не установлен. В принципе, это довольно сложная операция, но с помощью jQuery её можно записать всего одной строкой. Code (jQuery) <script type="text/javascript">
$(document).ready(function(){
$('a[href^="http"]:not([href*="likbezz.ucoz.ru"]),a[href^="/go?"]').addClass('outLink').attr('target', '_blank');
});
</script>
Где: $(document).ready() - узнаём о готовности документа, то есть о том, что его объектная модель готова к использованию, обработке скриптом. $('a[href^="http"]:not([href*="likbezz.ucoz.ru"]),a[href^="/go?"]') - выбираем все теги «а» с атрибутом «http», в котором не содержится домен сайта, и которые начинаются с «/go?» - сервис обрабатывает только внешние ссылки. .addClass('outLink') - присваиваем класс, отвечающий за стилевое оформление ссылки. .attr('target', '_blank') - и, устанавливаем атрибут «target» в значение «_blank» (ссылки будут открываться в новом окне)
Вот так ... Оформление - возьмите на себя, - это всего лишь пример, показывающий возможности CSS и ... ヅ ... JScript. Также, можно оформлять и ссылки на картинки, на архивы, на программы, документы ... определённые сайты ... и прочее ... Возможно, напишу, в следующий раз. Вот ссылка на пример, на всякий ... Примеры к статье «Стилизация (оформление) внешних ссылок. Для форума. юКоз (uCoz)»... А вот как это должно выглядеть:
P.S.Всем удачи... ヅ
Flesh.
Источник: Стилизация (оформление) внешних ссылок. Для юКоз (uCoz).Подробнейшая инструкция, селекторы атрибутов | 
